破坏方法jQuery DatePicker删除DatePicker，但是当我重新实例化一个新的时，仍然选择上一个选定的日期值 [英] Destroy method on jQuery DatePicker removes DatePicker but when I re-instantiate a new one, the previous selected Date value is still selected

问题描述

我创建了一个演示，以显示我使用了一个名为 Zebra-Datepicker 的jQuery库的问题。

Zebra-Datepicker文档：

  / ** 
 *销毁日期选择器。 
 * 
 * @return void 
 * / 
 plugin.destroy = function（）{
 
 //删除附加的图标（如果存在） ... 
 if（undefined！== plugin.icon）plugin.icon.remove（）; 
 
 // ...和日历
 plugin.datepicker.remove（）; 
 
 //从文档中删除关联的事件处理程序
 $（document）.unbind（'keyup.Zebra_DatePicker_'+ uniqueid）; 
 $（document）.unbind（'mousedown.Zebra_DatePicker_'+ uniqueid）; 
 $（window）.unbind（'resize.Zebra_DatePicker_'+ uniqueid）; 
 
 //删除与元素
 $ element.removeData（'Zebra_DatePicker'）的关联; 
 
}; 
  

解决方案

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

  $（'＃updateDate'）。on（'click'，function（）{
 $（'＃task-modal-due-date-span'）。text（'2015-05-24'）; 
}）; 
  

到：

  $（'＃updateDate'）。on（'click'，function（）{
 $（'＃task-modal-due-date-span'）。 -24'）。val（'2015-05-24'）; 
}）; 
  

原因是当您重建一个新的DatePicker控件时，它正在查看值，而不是跨度的文本。 （注意：通常你会把DatePicker附加到一个input元素，而不是一个span元素。）

I created a demo to show the issue I am having using a jQuery library called Zebra-Datepicker.

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

My demo shows how to:

• create a DatePicker instance,
• select a date value,
• destroy the date picker instance,
• create a new instance of the date picker,
• select a new date value....

Problem:

The problem is that destroying the DatePicker does not seem to destroy the previous selected date value! So when instantiating a new DatePicker, it has the previous Date value selected instead of a new value!

I could really use some expert help as this is crucial for me to fix for my project which loads Project Task records into a Modal DIV. My Task records all share the HTML in the DOM of a single Modal, just replacing placeholder variables for a Task and then re-setting them when Modal is closed for the next Task to do the process over and over.

My Demo JSFiddle: http://jsfiddle.net/jasondavis/Lqwfamoc/17/

If you follow these steps on my demo you will see what I mean...

1. Click on Date SPAN to reveal DatePicker calendar and click on date 2015-05-30
2. Click Destroy DatePicker button
3. Click on Date Span which will then show DatePicker is missing since we destroyed it.
4. Now click on UPDATE DatePicker to 2015-05-24 Button which will set the Date SPAN value to have a new date of 2015-05-24. When we instantiate the DatePicker plugin again, it should grab this new date value in the SPAN and set the DatePicker to this date!
5. Now click Build New DatePicker button which instantiates a new DatePicker
6. Now click the Date SPAN text: 2015-05-24 to show the DatePicker Calendar again
7. You should now see that the original 30th day 2015-05-30 is selected in the DatePicker even though it SHOULD now have our Date value of 2015-05-24 selected instead since we destroy() and re-instantiated a new DatePicker after Destroying the old one!

Apparently, the Destroy method didn't full destroy or something else is going on? Any ideas on how to fix this?

The sourcecode of the actual Zebra-Datepicker lIbrary's destroy() method: Located here
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');

};

解决方案

I found the problem. You need to change this:

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

to this:

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

The reason is that when you rebuild a new DatePicker control, it is looking at the value of the span, not the text of the span. (Note: Normally you would attach a DatePicker to an "input" element, not a "span" element.)

这篇关于破坏方法jQuery DatePicker删除DatePicker，但是当我重新实例化一个新的时，仍然选择上一个选定的日期值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！