problem when cloning jQuery UI datepicker

Question

I have a div in which there is a datepicker. I use something like this to clone it:

mydiv = $(\'#someDiv\');

// works fine so far
mydiv.find(\'input.datefie         


        

Answer 1

This works for me with jQuery UI 1.7.2

var mydiv = $('#someDiv');
mydiv.find('input.datefield').datepicker();
var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
newDiv.find('input.datefield')
  .attr("id", "")
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker();

Check http://jsbin.com/ahoqa3/2 for a quick demo

btw. you seem to have different errors in the code of your question. The css class is hasDatepicker not hadDatepicker and at one time you wrote mydiv and the next time the variable is myDiv which isn't the same.

Answer 2

$('input.datefield').datepicker("destroy");
$('input.datefield').datepicker();

it works good. But just doing this, datepicker will open on cloned input and set the date to the original input (because they have the same ID)

to solve this you must change id attribute of the cloned input.

dp = < cloned input >
var d = $('input.vDateField');
dp.removeClass('hasDatepicker');
dp.attr('id', dp.attr('id')+d.length);
d.datepicker("destroy");
d.datepicker();

and it will work great!

Answer 3

var dt = new Date();
var month = dt.getMonth();
var day = dt.getDate();
var year = dt.getFullYear()-5;
            $newClone.children().children("#fna"+clickID)
    .attr({
        'id': 'fna1'+newID,
        'name': 'fna'+newID,
        'value': day + '-' + month + '-' + year
    })
    .datepicker("destroy")
    .datepicker({
        firstDay: 1, 
        changeMonth: true, 
        changeYear: true,
        yearRange: 'c-100:c',
        defaultDate: '-1y',
        dateFormat: 'dd-mm-yy' ,
        nextText: "Mes siguiente",
        prevText: "Mes anterior",
        monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
    });

Answer 4

Datepicker doesn't if the ID of an element is changed. So, it is better not to change the id of a element if it is must required. But if you really needs to change the ID and that changed id needs to work with datepicker then follow it:

$(selector).removeClass('hasDatepicker');
$(selector).datepicker({
  changeMonth: true,
  changeYear: true
});

Answer 5

Here how it worked for me:

First you need to remove the class hasDatepickerfrom the cloned elements,because this is what is preventing the datepicker from getting attached to the specific element.

Then you gotta remove the id attribute from each of the cloned elements else .datepicker() will assume that datepicker is added to this element.

After that call .datepicker() on cloned element.

newDiv.find('.classAttributeGivenForDatepicker').each(function() {
   $(this).removeAttr('id').removeClass('hasDatepicker');
   $(this).datepicker({dateFormat: 'dd-mm-yy', minDate: 0, autoclose: true,});
});

Answer 6

just do

$('input.datefield').datepicker("destroy");

before cloning the div. Then after inserting the clone bind the datepicker again

$('input.datefield').datepicker();

kind of a 'hacky' solution but it works perfectly.