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>

Fiddle:

Answer 1

克隆输入后，您需要在输入上再次初始化datepicker。

您可以通过在要使用日期选择器的输入上添加类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/

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

1 个答案: