cloned datepicker input not working

Question

I have a datepicker input ( jquery UI) as below

<div class="row more-info-1">
<input class="pi-datepicker" type="text">
</div>

<a href="javascript:void(0)" onclick="addMoreDetails(1)">Add More</a>

I need to clone this input multiple times , so my javascript is :

$('.pi-datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
function addMoreDetails(nit_quotation_id) {
    $latest_div     = $('.more-info-'+nit_quotation_id+':last');  

    $latest_div.datepicker('destroy').removeAttr('id')

    $clone          = $latest_div.clone(false);

    $latest_div.after($clone);
    $clone.find('input.pi-datepicker')
      .removeClass('hasDatepicker')
      .removeData('datepicker')
      .unbind()
      .datepicker({ dateFormat: 'dd-mm-yy' });
}

But when I clicked on the cloned input , the datepicker screen appears, but the value is changed in the first input box. Kindly check the FIDDLE

Suresh Ponnukalai · Accepted Answer · 2017-09-20 10:38:09Z

4

This is happening because of your input controls having the same ID (dd_date). Update your input control id for each time when you click 'Add More' like below.

$clone.find('input.pi-datepicker')
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .attr('id', 'dd_date' + Math.random()) //newly added line
  .unbind()
  .datepicker({ dateFormat: 'dd-mm-yy' });

Updated Fiddle DEMO

answered Sep 20, 2017 at 10:38

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

cloned datepicker input not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related