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!

can u tell me how to generate the Textbox_id when you creating the textbox — ash060, Sep 26 '16 at 08:04

score 1 · Answer 1 · answered Sep 26 '16 at 08:09

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.

answered Sep 26 '16 at 08:09

freedomn-m

27,664
8
35
57

Sorry, not working. Show datepicker in the first input but not in the dynamically created ones – Miguel Mas Sep 26 '16 at 08:25
What you if you use correctly formatted html for the `` part? – freedomn-m Sep 26 '16 at 08:32

score 1 · Accepted Answer · answered Sep 26 '16 at 08:34

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.

Md. Khairul Hasan · Answer 3 · 2016-09-26T08:14:08.587

0

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/

edited Sep 26 '16 at 08:14

answered Sep 26 '16 at 07:52

Md. Khairul Hasan

704
1
10
21

I am using jquery below 1.9 so on() wont work. Changed to live() and it is not working. Sorry, but cannot update jquery's version – Miguel Mas Sep 26 '16 at 08:03
Exactly which version are you using? `on()` is from 1.7 – freedomn-m Sep 26 '16 at 08:06

score 0 · Answer 4 · answered Sep 26 '16 at 08:19

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'));
  });
});

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

4 Answers4

Linked