javascript - 复制 jQuery 日期选择器

Question

datepicker 函数只对创建的第一个输入框起作用。

我正在尝试通过克隆包含它的 div 来复制日期选择器。

<a href="#" id="dupMe">click</a>
<div id="template">
  input-text <input type="text" value="text1" id="txt" />
  date time picker <input type="text" id="example" value="(add date)" />
</div>

初始化日期选择器，根据jQuery UI documentation我只需要执行 $('#example').datepicker(); 它确实有效，但仅在创建的第一个日期选择器上有效。

复制 div 的代码如下:

$("a#dupMe").click(function(event){
  event.preventDefault();
  i++;
  var a = $("#template")
            .clone(true)
            .insertBefore("#template")
            .hide()
            .fadeIn(1000);
  a.find("input#txt").attr('value', i);
  a.find("input#example").datepicker();
});

最奇怪的是，在 document.ready 上我有:

$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });

如果我点击 #txt 它总是有效。

Answer 1

我改用 CSS 类:

<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />

然后，在您的 document.ready 函数中:

$('.calendar').datepicker();

以这种方式对多个日历字段使用它对我有用。