19

我有一个 div，其中有一个日期选择器。我用这样的东西来克隆它：

mydiv = $('#someDiv');

// works fine so far
mydiv.find('input.datefield').datepicker();

// clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);

// datepicker won't re-init if this class is present
newDiv.find('.hadDatepicker').removeClass('hadDatepicker');

// reinitialize datepicker
newDiv.find('input.datefield').datepicker();

这是我的代码的精简版。它可以工作并且日历按预期显示在预期的位置..但是当单击日期时，前一个日期选择器的值会更新..（它被克隆的那个）。

我曾尝试像这样销毁（不存在的）实例：

newDiv.find('input.datefield').datepicker('destroy').datepicker();

没运气 ..

我检查了它如何跟踪实例并手动清除数据，如下所示：

newDiv.find('input.datefield').data('datepicker', false).datepicker('destroy').datepicker();

仍然没有运气。

我不明白的是，只有日期选择行为是错误的，其他一切都按预期工作。

我真的不知道现在还要检查什么..

4

12 回答 12

42

这适用于我的 jQuery UI 1.7.2

var mydiv = $('#someDiv');
mydiv.find('input.datefield').datepicker();
var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
newDiv.find('input.datefield')
  .attr("id", "")
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker();

检查http://jsbin.com/ahoqa3/2以获得快速演示

顺便提一句。您的问题代码中似乎有不同的错误。css 类hasDatepicker不是hadDatepicker，一次你写mydiv的，下一次变量myDiv是不一样的。

于 2010-03-14T11:24:09.283 回答
27

这就是问题所在。datepicker 在初始化时为它绑定的输入字段创建基于 UUID 的 ID 属性。你克隆这些元素会导致更多的元素具有相同的 ID（jQuery 不喜欢）或不同的 ID，如果你的克隆例程管理它（这意味着 datepicker 不知道克隆）。换句话说，datepicker 仅在您调用它时初始化与您的选择器匹配的所有元素。当您可以将 init 调用包装在用于创建克隆的任何函数中时，尝试一遍又一遍地销毁/禁用/启用实际上没有多大意义。

因为我的克隆函数通常从隐藏的 DOM 元素而不是可见元素复制，所以我可以自由地决定是否需要在克隆之前或之后进行绑定。因此，将 #templateDiv 设为页面上的隐藏元素，并在其中包含 INPUT 元素。

mydiv = $('#templateDiv');
mydest = $('#someDiv');

function make_the_donuts() {
    newDiv = myDiv.clone(true).insertAfter(mydest);  
    // attach datepickers by instance rather than by class
    newDiv.find('input.datefield').datepicker();
}

这几乎可以做到。尽可能克隆（true），从长远来看，它会让你头疼。

于 2010-03-26T22:43:35.767 回答
8

如果您.datepicker('destroy').removeAttr('id')在克隆之前调用然后重新初始化日期选择器，它将起作用。

这似乎是破坏的错误，因为它应该将元素返回到其原始状态。

于 2012-03-12T15:35:50.707 回答
5

做就是了

$('input.datefield').datepicker("destroy");

在克隆 div 之前。然后在插入克隆后再次绑定日期选择器

$('input.datefield').datepicker();

一种“hacky”解决方案，但效果很好。

于 2010-06-18T23:00:49.113 回答
2 
$('input.datefield').datepicker("destroy");
$('input.datefield').datepicker();

它运作良好。但只是这样做，日期选择器将在克隆输入上打开并将日期设置为原始输入（因为它们具有相同的 ID）

要解决这个问题，您必须更改克隆输入的 id 属性。

dp = < cloned input >
var d = $('input.vDateField');
dp.removeClass('hasDatepicker');
dp.attr('id', dp.attr('id')+d.length);
d.datepicker("destroy");
d.datepicker();

它会很好用！

于 2010-10-27T12:55:39.547 回答
1

这对我来说是如何工作的：

首先，您需要从克隆的元素中删除类hasDatepicker，因为这是阻止日期选择器附加到特定元素的原因。

然后你必须从每个克隆的元素中删除id属性，否则 .datepicker() 将假定 datepicker 已添加到此元素。

在那次通话之后。克隆元素上的datepicker ()。

newDiv.find('.classAttributeGivenForDatepicker').each(function() {
   $(this).removeAttr('id').removeClass('hasDatepicker');
   $(this).datepicker({dateFormat: 'dd-mm-yy', minDate: 0, autoclose: true,});
});
于 2018-05-30T13:42:49.793 回答
0

换个顺序怎么办？

mydiv = $('#someDiv');

// clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);

// datepicker won't re-init if this class is present
// not necessary anymore
// newDiv.find('.hadDatepicker').removeClass('hadDatepicker');

newDiv.find('input.datefield').datepicker();

// datepicker attached as a last step
mydiv.find('input.datefield').datepicker();

老实说，我不知道 datepicker 在内部是如何工作的。我的预感是它在 jQuery DOM 存储中存储了一些东西。让我们不惜一切代价避免复制它。

（您可能在这些代码行之间有很长的业务逻辑。关键是在将日期选择器放在上面之前备份#someDiv。）

于 2010-03-14T03:33:08.413 回答
0

确保新克隆的日期选择器的名称和 ID 与原始的不同。如果它们都具有相同的名称，那么您所描述的行为将是正常的。

尝试将最后一行更改为：

newDiv.find('input.datefield').attr('id', 'newDatePicker').attr('name', 'newDatePicker').datepicker();
于 2010-03-14T04:14:29.180 回答
0

适合我的完整解决方案。

//before
$('input.fecha').datepicker("destroy");
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//change de input id
$("input.fecha").attr("id", function (arr) {return "fecha" + arr;});
//after
$('input.fecha').datepicker({defaultDate: "+1w",changeMonth: true,numberOfMonths: 1, showOn: "button", buttonImage: "<?php echo base_url() ?>images/calendar.gif", buttonImageOnly: true, showLabel:false, dateFormat:"yy-mm-dd"});

还有 html td 表。

<td><?php echo form_input(array('name' => 'fecha','id' => 'fecha','class' => 'fecha')); ?></td>

希望这对您有所帮助。

再会

于 2012-11-07T22:39:59.003 回答
0 
var dt = new Date();
var month = dt.getMonth();
var day = dt.getDate();
var year = dt.getFullYear()-5;
            $newClone.children().children("#fna"+clickID)
    .attr({
        'id': 'fna1'+newID,
        'name': 'fna'+newID,
        'value': day + '-' + month + '-' + year
    })
    .datepicker("destroy")
    .datepicker({
        firstDay: 1, 
        changeMonth: true, 
        changeYear: true,
        yearRange: 'c-100:c',
        defaultDate: '-1y',
        dateFormat: 'dd-mm-yy' ,
        nextText: "Mes siguiente",
        prevText: "Mes anterior",
        monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
    });
于 2012-12-19T09:22:59.313 回答
0

这可能有点晚了，但上面的所有建议都对我不起作用，我想出了一个简单的解决方案。

首先，是什么导致了问题：JQuery 将 datepicker 分配给元素 id。如果你正在克隆元素，那么同样的 id 也可能被克隆。哪个 jQuery 不喜欢。无论您单击哪个输入字段，您最终都可能会收到空引用错误或分配给第一个输入字段的日期。

解决方案：

1) 销毁 datepicker 2) 为所有输入字段分配新的唯一 ID 3) 为每个输入分配 datepicker

确保您的输入是这样的

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

在克隆之前，销毁日期选择器

$('.n1datepicker').datepicker('destroy');

克隆后，也添加这些行

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

神奇的事情发生了

于 2013-06-17T16:55:45.080 回答
0

如果元素的 ID 发生更改，则 Datepicker 不会。因此，如果必须需要，最好不要更改元素的 id。但是，如果您确实需要更改 ID，并且更改后的 id 需要与 datepicker 一起使用，请遵循它：

$(selector).removeClass('hasDatepicker');
$(selector).datepicker({
  changeMonth: true,
  changeYear: true
});

于 2017-02-01T05:17:02.427 回答