复制 jQuery 日期选择器

Posted 2023-05-08

【中文标题】复制 jQuery 日期选择器

【英文标题】：duplicating jQuery datepicker

【发布时间】：2010-09-07 06:43:57

【问题描述】：

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，它总是有效的。

【参考方案1】：

我改用 CSS 类：

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

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

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

对多个日历字段使用这种方式对我来说很有效。

【参考方案2】：

我建议也只使用一个通用的类名。但是，如果您出于某种原因反对这一点，您还可以编写一个函数来为模板 div 中的所有文本框创建日期选择器（在每次复制后调用）。比如：

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

【参考方案3】：

我遇到了一个非常相似的问题，经过数小时的测试，我找到了解决方案。我正在复制一段 html 代码并将其插入到已经包含 jQuery 日期选择器日历的部分之后。起初我没有意识到 jQuery UI 日历在执行 .datepicker() 函数时会修改元素的类。结果是，当您尝试复制代码并为该新部分启动日历的新实例时，它会失败，因为根据 CSS 已经有一个。如果您尝试使用.datepicker('destroy')，则无法销毁此幽灵实例，因为它实际上并不存在。我通过在我的 HTML 中重置日期选择器元素的类然后将日期选择器添加到该元素来解决了这个问题...

下面是我使用的代码。希望这可以节省其他人一些时间...

$('#addaddress').click(function() 
  var count = $('.address_template').size();
  var html = $('.address_template').eq(0).html();
  $('#addaddress').before('<div class="address_template">' + html + '</div>');
  $('.address_template H1').eq(count).html("Previous Address " + count);
  $('.address_date').eq(count).attr("class","address_date");
  $('.address_date').eq(count).attr("id","movein" + count);
  $("#movein" + count).datepicker();
);

【讨论】：

我不太理解示例代码，但您有一个很好的观点 - 您需要先删除 .hasDatepicker 类，然后才能重新初始化日期选择器。然后在克隆的元素上重新初始化 datepicker，它工作正常。

【参考方案4】：

我正在克隆的 html 有多个日期选择器输入。

使用 Ryan Stemkoski 的回答和 Alex King 的评论，我想出了这个解决方案：

var clonedObject = this.el.find('.jLo:last-child')
clonedObject.find('input.ui-datepicker').each(function(index, element) 
    $(element).removeClass('hasDatepicker');
    $(element).datepicker();
);
clonedObject.appendTo('.jLo');

谢谢大家。