I need to clone a jQuery datepicker input field attached a datePicker to it using the on statement.

$('form').on('click', '.datepicker', function(){
         $(this).datepicker({'changeMonth': true, 'changeYear': true, 'dateFormat': 'MM dd', 'yearRange': "<?php echo date('Y') ?>:<?php echo date('Y') + 1 ?>"}).focus();
    });

Then before cloning the input filed, I am destroying the datepicker using

$(".datepicker").datepicker('destroy').removeClass('hasDatepicker');

But still the datepicker that is being attached to then newly cloned input is messing with original input field...

Can anybody please help me on this topic?

I need to clone a jQuery datepicker input field attached a datePicker to it using the on statement.

$('form').on('click', '.datepicker', function(){
         $(this).datepicker({'changeMonth': true, 'changeYear': true, 'dateFormat': 'MM dd', 'yearRange': "<?php echo date('Y') ?>:<?php echo date('Y') + 1 ?>"}).focus();
    });

Then before cloning the input filed, I am destroying the datepicker using

$(".datepicker").datepicker('destroy').removeClass('hasDatepicker');

But still the datepicker that is being attached to then newly cloned input is messing with original input field...

Can anybody please help me on this topic?

• javascript
• jquery
• datepicker

2 Answers 2

try this

var $clone=$(".datepicker").clone();
$clone.datepicker("destroy");
$clone.removeAttr("id");
$clone.datepicker();
$('form').append($clone);

when you clone a row it copies every thing, and when the date picker is added again it calls the input by id, you must remove the id so that the next datepicker can assign a new id to the input :)

You should destroy the datepicker for the clone element like,

var $clone=$(".datepicker").clone();
$clone.datepicker('destroy').removeClass('hasDatepicker');
$('form').append($clone);