activating datepicker on dynamically cloned fields

Question

I am cloning a set of fields, one of which is a datepicker field.

I have see this Use JQuery Datepicker on dynamically created fields and this jquery datepicker on cloned elements and this putting datepicker() on dynamically created elements - JQuery/JQueryUI but none seem to work for me.

HTML:

<div class="dedicationfields">
  <div class="form-group">
    <div class="col-md-12">
      <div class="col-md-6">
        <label class="datetag"> date: </label>
        <input placeholder="enter date" name="requestedDate"
           value="" size="30" class="required form-control datepicker  " 
           title=" " id="dp1529938300566" type="text">
      </div>
    </div>
  </div>
</div>
<div class="form-group" style="margin-top: 3px;">
  <input name="triggerAdd" id="triggerAdd" class="btn btn-success" value="ADD A NEW SET" type="button">
</div>

JS CODE:

$("#triggerAdd").click(function(){

    // clone fields:
   var dedicationfields = $(".dedicationfields:first").clone(true).insertAfter(".dedicationfields:last");

    //make sure new fields are empty: 
    $(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');    

    $(".dedicationfields:last .datepicker" ).removeClass('hasDatepicker'); // added the removeClass part.

});

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

Here is a DEMO: https://jsfiddle.net/kneidels/w12cx7qt/11/

Your fiddle appears to be working absolutely fine...? The cloned fields have their own datepicker instance which opens and lets me set a date as expected. If there is another issue please edit the question to give a much clearer indication of what you want to happen. Please also put all relevant code in the question. — Rory McCrossan, Jun 25 '18 at 15:13
I think his error is that whenever he add new datepicker and selects a date, it always changed the first datepicker not the intended new datepicker — ajbee, Jun 26 '18 at 01:28
@jt25 is correct - the datepicker always opens from the first field, not the cloned ones — kneidels, Jun 26 '18 at 07:27
Remove this line - `$(".dedicationfields:last .datepicker" ).removeClass('hasDatepicker');`, use datepicker's `destroy` method. and immediately re-initiatize the datepicker instead of doing it on `focus`. Doing it on `focus` will initialize the datepicker everytime which is not needed. — Rupesh Jain, Jun 26 '18 at 07:35

ajbee · Accepted Answer · 2018-06-26T08:23:38.843

2

You can try this code

    $("#triggerAdd").click(function(){

       var $last   = $('.dedicationfields:last');
       var $clone  = $last.clone(false);
       $last.after($clone);
       $(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');
       $clone.find('input.datepicker')
            .removeClass('hasDatepicker')
            .removeData('datepicker')
            .attr('id', 'change_id' + Math.random())
            .unbind()
            .datepicker();
            });

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

You can just customize the change_id ID attribute of your liking.

jsfiddle

edited Jun 26 '18 at 08:23

answered Jun 26 '18 at 08:14

ajbee

3,511
3
29
56

Seems to work great - thank you. Can you explain what element of my code you think was the issue? – kneidels Jun 26 '18 at 12:17
1

The issue here is that you need to add an attribute for ID because it will always point to the first created datepicker.That ID is important to bind the event for the newly cloned datepicker. – ajbee Jun 27 '18 at 01:15

activating datepicker on dynamically cloned fields

1 Answers1