Jquery datepicker on dynamically created inputs changing the date of the first input

Question

I am adding date inputs with datepicker attached.

An the problem is: I pick a date in the first input and I try to pick another date in the second or third or .. inputs. Well, this last picked date shows in the first input, overwriting the already picked date, and leaves the new input blank.

Why is that? How can I solve this?

Here's the html:

    <div id="main">
    <span>
    <input type="text" id="mydate" name="mydate[]" class="datepicker">
    </span>
    </div>
    <a href="#" id="addInput">Add input</a>

And here's the js:

    var datePickerOptions = {
        dateFormat: 'd/m/yy',
        firstDay: 1,
        changeMonth: true,
        changeYear: true
    }

    $(document).ready(function() 
    {  
      $('.datepicker').datepicker(datePickerOptions);

    }); 

    $(function() {
    var scntDivA = $('#main');
    var ii = $('#main span').size() + 1;

            $('#addInput').live('click', function() {

                    $('<input type="text" id="mydate" name="mydate[]" class="datepicker"').appendTo(scntDivA);
                    $('.datepicker').datepicker(datePickerOptions);
                    ii++;
                    return false;
            });
   }); 

Thanks!

Answer 1

Change this code:

$('<input type="text" id="mydate" name="mydate[]" class="datepicker"').appendTo(scntDivA);
$('.datepicker').datepicker(datePickerOptions);

to

var inp =   $('<input type="text" id="mydate" name="mydate[]" class="datepicker"').appendTo(scntDivA);
inp.datepicker(datePickerOptions);

When you use .appendTo it returns the item that was appended, in this case the new input, so you don't need to "re-find" it.

When you use $('.datepicker'). it finds everything with class .datepicker including all the previously added items, thus applying the new options to the old datepicker.

Answer 2

You can check below code. We are setting the unique class to each newly added text field and initializing the datepicker on newly added textfield only. In your code you were re-initializing the existing textfields hence previously selected dates were getting overridden.

 var datePickerOptions = { dateFormat: 'd/m/yy', firstDay: 1, changeMonth: true, changeYear: true } $(document).ready(function() { $('.datepicker').datepicker(datePickerOptions); var scntDivA = $('#main'); var ii = $('#main span').size() + 1; $('#addInput').on('click', function() { //adding the unique class like datepicker_number var newText = $("<input type=\\"text\\" id=\\"mydate_"+ii+"\\" name=\\"mydate[]\\" class=\\"datepicker datepicker_"+ii+"\\">"); $(newText).appendTo(scntDivA); //initializing the datepicker only on newly added textfield with class like datepicker_number $('.datepicker_'+ii).datepicker(datePickerOptions); ii++; return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script> <div id="main"> <span> <input type="text" id="mydate" name="mydate[]" class="datepicker"> </span> </div> <a href="#" id="addInput">Add input</a> 

Note: above code snippet uses jQuery 1.11.0 but you can use code within .on handler as it is within your .live code.

Answer 3

This uses jquery 1.9.1

$(document).ready(function() 
{  
  $('body').on('focus',".datepicker", function(){
            $(this).datepicker(datePickerOptions);
    });​
}); 

Working Fiddle : https://jsfiddle.net/khairulhasanmd/bLb047rL/2/

Answer 4

Just call the datepicker plugin once for all initial inputs and once for every newly created input.

http://codepen.io/kante/pen/ALRvqN

Html:

<div id="main">
  <span>
    <input type="text" id="mydate" name="mydate[]" class="datepicker">
  </span>
</div>
<a href="#" id="addInput">Add input</a>

JS:

var datePickerOptions = {
  dateFormat: 'd/m/yy',
  firstDay: 1,
  changeMonth: true,
  changeYear: true
}

$(document).ready(function() {
  $('.datepicker').datepicker();
  $('#addInput').live('click', function(){
    $input = $('<input type="text" name="mydate[]" />').datepicker(datePickerOptions);
    $('<div>').html($input).appendTo($('#main'));
  });
});