Question

I have an input field that I define as a datepicker through a css class. I now want to clone this input field and have it so the cloned inputs are also datepickers.

After reading from various sources I was lead to believe that the following code should work but it doesn’t. I was hoping maybe someone could help me figure out what I was doing wrong 🙂

<input type="text" id="date" name="date" class="calendar" />
<input type="button" id="clone" name="clone" value="Clone dates" />

And here’s the javascript:

<script type="text/javascript">
$(document).ready(function(){

 $('.calendar').datepicker();

 $('#clone').click(function()
 {
  $('.calendar:last').clone().append().insertAfter('.calendar:last');
 });

});

</script>

So far the input field is duplicated and is inserted at after the last instance but the datepicker doesn’t work. I tried passing ‘true’ to the clone function but it gave me an error saying that inst wasn’t defined.

Any help would be appreciated 🙂

Answer 1

Change it to this:

$('.calendar:last').clone(false).removeClass('hasDatepicker').insertAfter('.calendar:last').datepicker();