Cloning JQuery UI datepicker-优快云博客

本文详细介绍了如何解决使用jQuery UI日期选择器时遇到的克隆问题，包括通过手动调用datepicker('destroy')方法、或者在克隆前先销毁原有日期选择器来解决相关错误。

2019独角兽企业重金招聘Python工程师标准>>>

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();