Cloning JQuery UI datepicker

2012/03/02 09:31
阅读数 372
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


展开阅读全文
打赏
0
0 收藏
分享
加载中
William博主
2014/04/04 17:09
回复
举报
更多评论
打赏
1 评论
0 收藏
0
分享
返回顶部
顶部