复制jQuery datepicker

Question

该datepicker功能仅适用于创建的第一个输入框.

我正在尝试通过克隆div包含它的那个来复制一个datepicker .

<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的文档,我只有这样做$('#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();

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

Answer 2

我建议只使用一个通用的类名.但是,如果您出于某种原因反对这种情况,您还可以编写一个函数来为模板中的所有文本框创建日期选择器div(在每次复制后调用).就像是:

function makeDatePickers() {
  $("#template input[type=text]").datepicker();
}