克隆jQuery输入日期选择器元素

Question

我正在使用jQuery日期选择器，我想克隆输入元素。 克隆和静态元素时，jQuery代码似乎运行良好，但不能与日期选择器一起使用。 下面是代码：

$(function(){
    var $button = $('.datepicker-input--checkin').clone();
    $('.package').html($button);
});

$(function(){    
    $('#thedate').datepicker({
        dateFormat: 'dd-mm-yy',
        altField: '#thealtdate',
        altFormat: 'yy-mm-dd'
    });
});

显示字段：

<input id="thedate" type="text" class="datepicker-input--checkin" /><br />

隐藏字段：

<input id="thealtdate" type="text" class="datepicker-input--checkin" /><br />
<input id="thesubmit" type="button" value="Submit" />

<div class="package">
</div>

小提琴：

Answer 1

克隆输入后，您将需要再次在输入上初始化日期选择器。

您可以通过在要使用datepicker的输入上添加一个datepicker类，然后使用以下方法初始化日期选择器（在克隆之后）来做到这一点：

$(".package .datepicker").datepicker({
     dateFormat: 'dd-mm-yy',
     altField: '#thealtdate',
     altFormat: 'yy-mm-dd'
});

这是更新的小提琴： https : //jsfiddle.net/txqepe36/3/

您可以通过删除元素ID中的datepicker初始化来进一步简化代码，因为在预期具有日期选择器控件的两个输入上都有一个datepicker类。

您的JS代码可以简化为：

 $(function() {
   var $button = $('.datepicker-input--checkin').clone();
   $('.package').html($button);

   $(".datepicker").datepicker({
     dateFormat: 'dd-mm-yy',
     altField: '#thealtdate',
     altFormat: 'yy-mm-dd'
   });
 });

请注意，您将需要在输入中添加一个datepicker类。 所以它应该看起来像：

<input id="thedate" type="text" class="datepicker-input--checkin datepicker" />

这是小提琴： https : //jsfiddle.net/txqepe36/4/