jQuery DatePicker 上的 Destroy 方法删除了 DatePicker 但是当我重新实例化一个新的时，之前选择的 Date 值仍然被选中

Question

我创建了一个演示来展示我在使用名为 Zebra-Datepicker 的 jQuery 库时遇到的问题。

Zebra-Datepicker 文档：http://stefangabos.ro/jquery/zebra-datepicker/ Zebra-Datepicker GitHub: https://github.com/stefangabos/Zebra_Datepicker

我的演示展示了如何：

创建一个 DatePicker 实例，
select一个日期值，
销毁日期选择器实例，
创建日期选择器的新实例，
select 一个新的日期值....

问题：

问题是销毁 DatePicker 似乎并没有销毁先前的 selected 日期值！因此，当实例化一个新的 DatePicker 时，它具有以前的 Date 值 selected 而不是新值！

我真的需要一些专家的帮助，因为这对我修复将项目任务记录加载到模态 DIV 的项目至关重要。我的Task记录都共享单个Modal的DOM中的HTML，只是替换一个Task的占位符变量，然后在Modal关闭时重新设置它们以供下一个Task重复执行该过程结束了。

我的演示 JSFiddle：http://jsfiddle.net/jasondavis/Lqwfamoc/17/

如果您按照我的演示中的这些步骤操作，您就会明白我的意思...

单击 Date SPAN 以显示 DatePicker 日历并单击日期 2015-05-30
单击销毁 DatePicker 按钮
点击 Date Span，然后会显示 DatePicker 丢失，因为我们销毁了它。
现在单击 UPDATE DatePicker to 2015-05-24 按钮，这会将 Date SPAN 值设置为新日期 2015-05-24。当我们再次实例化 DatePicker 插件时，它应该在 SPAN 中获取这个新的日期值并将 DatePicker 设置为这个日期！
现在单击 Build New DatePicker 按钮实例化一个新的 DatePicker
现在单击 Date SPAN 文本：2015-05-24 再次显示 DatePicker 日历
您现在应该看到原始的第 30 天 2015-05-30 在 DatePicker 中被 select 编辑，尽管它 现在应该有我们的日期值 2015-05-24 select 因为我们 destroy() 和 re-instantiated 一个新的 DatePicker 在销毁旧的之后！

显然，Destroy 方法没有完全销毁或发生其他事情？有想法该怎么解决这个吗？

实际Zebra-Datepicker lIbrary的destroy()方法源码：位于此处
https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.src.js#L1469

/**
 *  Destroys the date picker.
 *
 *  @return void
 */
plugin.destroy = function() {

    // remove the attached icon (if it exists)...
    if (undefined !== plugin.icon) plugin.icon.remove();

    // ...and the calendar
    plugin.datepicker.remove();

    // remove associated event handlers from the document
    $(document).unbind('keyup.Zebra_DatePicker_' + uniqueid);
    $(document).unbind('mousedown.Zebra_DatePicker_' + uniqueid);
    $(window).unbind('resize.Zebra_DatePicker_' + uniqueid);

    // remove association with the element
    $element.removeData('Zebra_DatePicker');

};

Answer 1

我发现了问题。你需要改变这个：

$('#updateDate').on('click', function(){
    $('#task-modal-due-date-span').text('2015-05-24');
});

对此：

$('#updateDate').on('click', function(){
    $('#task-modal-due-date-span').text('2015-05-24').val('2015-05-24');
});

原因是当您重建一个新的 DatePicker 控件时，它正在查看范围的 value，而不是 text的跨度。（注意：通常您会将 DatePicker 附加到 "input" 元素，而不是 "span" 元素。）

jQuery DatePicker 上的 Destroy 方法删除了 DatePicker 但是当我重新实例化一个新的时，之前选择的 Date 值仍然被选中

Destroy method on jQuery DatePicker removes DatePicker but when I re-instantiate a new one, the previous selected Date value is still selected

javascript

jquery

datepicker

jquery-plugins