Datepicker from jQuery

You know how the jQuery UI extensions give a useful functionality for the javascript developers. The datepicker is a useful calendar tool that comes with variaty of functions.

How to setup the selected / defaultDate

It’s as simple as these lines of code:

$('#element_id').datepicker({
    ...
    defaultDate : d,
    ...
});

The problem

The problem is when you attach this datepicker constructor to a div which is hidden, and than you make it visible like so:

$('#element_id').show();
$('#element_id').hide();

after that action if you show the datepicker again invoking the constructor, even if the defaultDate has to have another value the displayed date is the old one.

The solution

Simply destroy the datepicker object on hide:

$('#element_id').hide().datepicker('destroy');

Related posts:

1. Toggle the visibility with jQuery
2. jQuery datepicker issue
3. jQuery check for element visibility