Bootstrap Snippet date dynamic field using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="http://www.a1b5.net/metro/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
<link href="http://www.a1b5.net/metro/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
        
<script src="http://www.a1b5.net/metro/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
 <script src="http://www.a1b5.net/metro/assets/pages/scripts/components-date-time-pickers.min.js" type="text/javascript"></script>
<div class="form-horizontal">
                                    <div class="form-body">
<!-- Begin cloned dynamic list section -->
        <div id="date1" class="clonedInput_4">
        <div class="form-group">
                                            <label class="control-label col-md-3 label_date">Date</label>
                                            <div class="col-md-3 fields">                                           
                                                <div id="name_data">
                                             <div class="input-group">
          <input class="form-control form-control-inline input-medium date-picker" id="datepicker" name="name[0][date]">          
        </div>
        </div>
                                                <span class="help-block">Choose a date </span>
                                            </div>
                                    
                                        </div>  
                                        </div><!-- end #date1 -->   
                                        <div class="form-group">
      <label class="control-label col-md-3"></label>
      <div class="col-md-4">
         <button type="button" id="btnAdd_4" name="btnAdd_4" class="btn btn-primary">Add new date</button>
          <button type="button" id="btnDel_4" name="btnDel_4" class="btn btn-danger">Remove last one</button>
        
      </div>
    </div>  
  </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
$('#btnAdd_4').click(function () {
        var num     = $('.clonedInput_4').length, // Checks to see how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // The numeric ID of the new input field being added, increasing by 1 each time
            newElem = $('#date' + num).clone().attr('id', 'date' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
    
    /*  This is where we manipulate the name/id values of the input inside the new, cloned element
        Below are examples of what forms elements you can clone, but not the only ones.
        There are 2 basic structures below: one for an H2, and one for form elements.
        To make more, you can copy the one for form elements and simply update the classes for its label and input.
        Keep in mind that the .val() method is what clears the element when it gets cloned. Radio and checkboxes need .val([]) instead of .val('').
    */
        // H2 - section
        newElem.find('.label_date').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Date #' + newNum);
        // date - text
        newElem.find('.label_date').attr('for', 'ID' + newNum + '_date_number');
        newElem.find('.input_date').attr('id', 'ID' + newNum + '_date_number').attr('name', 'ID' + newNum + '_date_number').val('');
    // Insert the new element after the last "duplicatable" input field
        $('#date' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();
    // Enable the "remove" button. This only shows once you have a duplicated section.
        $('#btnDel_4').attr('disabled', false);
    // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
        // This first if statement is for forms using input type="button" (see older demo). DELETE if using button element.
        if (newNum == 5)
        $('#btnAdd_4').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
        // This second if statement is for forms using the new button tag (see Bootstrap demo). DELETE if using input type="button" element.
        if (newNum == 5)
        $('#btnAdd_4').attr('disabled', true).text("You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached 
    });
    $('#btnDel_4').click(function () {
    // Confirmation dialog box. Works on all desktop browsers and idate.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"date dynamic field"
Bootstrap 3.3.0 Snippet by lospicos

Related: See More

Questions / Comments:

"date dynamic field" Bootstrap 3.3.0 Snippet by lospicos

Related: See More

Questions / Comments:

"date dynamic field"
Bootstrap 3.3.0 Snippet by lospicos