Destroy method on jQuery DatePicker removes DatePicker but when I re-instantiate a new one, the previous selected Date value is still selected

Question

I created a demo to show the issue I am having using a jQuery library called Zebra-Datepicker.

Zebra-Datepicker documentation: http://stefangabos.ro/jquery/zebra-datepicker/ Zebra-Datepicker GitHub: https://github.com/stefangabos/Zebra_Datepicker

My demo shows how to:

• create a DatePicker instance,
• select a date value,
• destroy the date picker instance,
• create a new instance of the date picker,
• select a new date value....

Problem:

The problem is that destroying the DatePicker does not seem to destroy the previous selected date value! So when instantiating a new DatePicker, it has the previous Date value selected instead of a new value!

I could really use some expert help as this is crucial for me to fix for my project which loads Project Task records into a Modal DIV. My Task records all share the HTML in the DOM of a single Modal, just replacing placeholder variables for a Task and then re-setting them when Modal is closed for the next Task to do the process over and over.

My Demo JSFiddle: http://jsfiddle.net/jasondavis/Lqwfamoc/17/

If you follow these steps on my demo you will see what I mean...

1. Click on Date SPAN to reveal DatePicker calendar and click on date 2015-05-30
2. Click Destroy DatePicker button
3. Click on Date Span which will then show DatePicker is missing since we destroyed it.
4. Now click on UPDATE DatePicker to 2015-05-24 Button which will set the Date SPAN value to have a new date of 2015-05-24. When we instantiate the DatePicker plugin again, it should grab this new date value in the SPAN and set the DatePicker to this date!
5. Now click Build New DatePicker button which instantiates a new DatePicker
6. Now click the Date SPAN text: 2015-05-24 to show the DatePicker Calendar again
7. You should now see that the original 30th day 2015-05-30 is selected in the DatePicker even though it SHOULD now have our Date value of 2015-05-24 selected instead since we destroy() and re-instantiated a new DatePicker after Destroying the old one!

Apparently, the Destroy method didn't full destroy or something else is going on? Any ideas on how to fix this?

The sourcecode of the actual Zebra-Datepicker lIbrary's destroy() method: Located here
https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.src.js#L1469

/**
 *  Destroys the date picker.
 *
 *  @return void
 */
plugin.destroy = function() {

    // remove the attached icon (if it exists)...
    if (undefined !== plugin.icon) plugin.icon.remove();

    // ...and the calendar
    plugin.datepicker.remove();

    // remove associated event handlers from the document
    $(document).unbind('keyup.Zebra_DatePicker_' + uniqueid);
    $(document).unbind('mousedown.Zebra_DatePicker_' + uniqueid);
    $(window).unbind('resize.Zebra_DatePicker_' + uniqueid);

    // remove association with the element
    $element.removeData('Zebra_DatePicker');

};

Answer 1

I found the problem. You need to change this:

$('#updateDate').on('click', function(){
    $('#task-modal-due-date-span').text('2015-05-24');
}); 

to this:

$('#updateDate').on('click', function(){
    $('#task-modal-due-date-span').text('2015-05-24').val('2015-05-24');
}); 

The reason is that when you rebuild a new DatePicker control, it is looking at the value of the span, not the text of the span. (Note: Normally you would attach a DatePicker to an "input" element, not a "span" element.)