Cloning JQuery UI datepicker

In case you were having problems with cloning fields with  jQuery UI datepicker  attached to them - solutions  mentioned   in   the   interwebs  are similar to this one:

1
$( '.cloned-input' ).removeClass( 'hasDatepicker' ).datepicker();

However, that did not work for me. If you happen to have a set of similar symptoms: 

• new datepicker is not instantiated at all
• JS errors occur while instantiating new datepicker
• even if datepicker is cloned, it refers to the old field

the issue is that there are remaining (cloned) events (if you're using  .clone(true)  like me) on the field AND there is a still attached cloned datepicker object.

SOLUTION

Either imitate  datepicker('destroy')  manually:

1
2
3
4
5
6
7
8
9
$input = $( '.cloned-input' );
// remove still present related DOM objects
$input.siblings( '.ui-datepicker-trigger,.ui-datepicker-apply' ).remove();
// remove datepicker object and detach events
$input
  .removeClass( 'hasDatepicker' )
  .removeData( 'datepicker' )
  .unbind()
  .datepicker();

or implement a different procedure:

1. before cloning destroy the datepicker on the base input
2. clone(true)
3. recreate the datepicker on base input
4. use unbind() and recreate datepicker on cloned input