重置日期范围约束 [英] Reset date range constraints

问题描述

我正在以一种相当复杂的形式使用jQueryUI和datepicker。我有一组4名日常工作人员都相互依赖。例如，选择Datepicker A中的日期会导致Datepicker B a.s.o的有效日期范围的更改。

通过使用datepicker的onSelect选项可以轻松实现：

  onSelect：function（selectedDate）{
 // find datepicker B; 
 //编辑数据标签B的有效日期范围。
} 
  

现在遇到问题的用例：由于不需要这些字段，用户可以执行以下步骤：

1）选择日期选择器A中的日期。这将触发onSelect并限制日期选择器B的日期范围。
2）改变主意并希望清除日期选择器A中的日期。

步骤2）有问题：首先，由于某些晦涩的原因，jQueryUI> 1.7没有明确的按钮。因此，datepicker的输入字段必须是可编辑的，甚至允许用户删除他之前选择的日期（通过使用退格按钮）。也许我可以接受

但是这里出现了真正的问题：用户从输入字段手动删除了他的日期后，我没有挂钩我的resetlogik，a.k.a。删除以前应用于日期选择器B的限制。onSelect不会被触发，但是据我所见，还没有其他的。

是唯一的方式来重置我的逻辑，将一个模糊侦听器放在datepicker输入字段上，每次检查一下该值是否为空？
是这样的，那么我真的会在datepicker小部件中查看一个清除机制的省略作为一个主要的错误。如果窗口小部件允许我限制其他日期窗口小部件的日期，那么它也应该允许我解除这些限制。

免责声明：此帖子与此部分重复问题，但唯一的awnser指向不正确工作的jshack更改月份时，清除按钮消失）。我也从jQuery问题管理中查看了 Ticket＃3999 。它被关闭为wontfix：/

感谢您的帮助。

解决方案

我不知道datepicker已经丢失了清除按钮！我开始看这个，并试图制定一个不依赖于添加另一个元素的解决方案，或者假设用户将知道按下 Esc 关闭窗口小部件。虽然您可以向用户说明该功能，这可能会解决您的问题; - ）

所以 我做了一个演示 ，其中我用清除替换了关闭按钮文本。我添加了一个额外的jQuery mouseup 委托事件在我的新的清除按钮，将在标准日期戳触发事件触发之前清除输入。

所以点击清除或使用退格键删除日期，然后 Esc 关闭datepicker将会将第二个输入恢复为默认的datepicker状态。

请注意，每次选择日期时，此演示在第一个输入中设置第二个输入范围。这可能不是您想要的功能。

希望这是您正在寻找的： - ）

<强>编辑：更新演示 啊，是的，这有点复杂！我已经重新使用了这个解决方案，比较通用，而且我认为这个解决方案是有效的。新演示一次就会创建所有的datepicker对象。有几个棘手的部分，即下一个 c>< input> 元素的通用结算，并正确确定哪个< input> / code>以清除清除按钮的按钮。我不知道只有一个datepicker。所以这是一个黑客，因为它只是设置一个jQuery .data（）属性具有datepicker的输入可见，然后使用它来清除正确的日期。请注意，在此演示中，如果清除所有后续输入，则仍会将所有后续输入复位，即清除第一个清除2和3，但清除第二个清除只清除第3个。

I am using jQueryUI and datepicker in a rather complicated form. I have a group of 4 datepickers that are all dependent on each other. For example selecting a Date in Datepicker A results in a change of the valid date range of Datepicker B a.s.o.

This is easily achieved by using the onSelect option of the datepicker:

onSelect: function(selectedDate){
       //find datepicker B;
       //edit the valid date range of datapicker B.
}

Now comes the problematic use case: Since these fields are not required a user is allowed to take the following steps:

1) Selects a date in date picker A. This would trigger the onSelect and restrict the date range of date picker B. 2) Changes his mind and wants to clear the date in date picker A.

Step 2) is problematic: First of all, for some obscure reason, jQueryUI > 1.7 does not have a clear button. So the input field of the datepicker has to be editable to even allow the user to delete (by using the backspace button) his previously selected date. Maybe I can accept that.

But here comes the real problem: After the user has manually deleted his date from the input field, I have no hook for my "reset" logik,a.k.a. removing the restrictions previously applied to date picker B. The onSelect is not triggered, but as far as I can see, nothing else is either.

Is the only way to reset my logic, to put an blur listener on the datepicker input field that everytime checks to see if the value is empty? Is it is so, then I really view the omition of a clear mechanism in the datepicker widget as a major bug. If the widget allows me to restrict the dates of other datepicker widgets, then it should also allow me to lift those restrictions.

DISCLAIMER: This post is partially a duplicate to this question, but the only awnser points to a js "hack" that doesn't correctly work (clear button disappears when changing the month). I also viewed Ticket #3999 from the jQuery issue management. It is closed as "wontfix" :/

Thank you for any help.

解决方案

I was not aware that the datepicker had lost the "Clear" button! I started looking at this and tried to make a solution that did not rely on adding another element or assuming that users will know that pressing Esc closes the widget. Although you could just give the users an explanation of that functionality, which might solve your problem ;-)

So I made a demo in which I have replaced the "Close" button text with "Clear". I have added one extra jQuery mouseup delegated event on my new "Clear" button which will clear the input before the standard datepicker events fire.

So either clicking "Clear" or using backspace to delete a date and then Esc to close the datepicker will revert the second input back to the default datepicker state.

Note that for this demo every time a date is selected in the first input the range on the second is set. This may not be your desired functionality.

Hope this is what you are looking for :-)

Edit: Updated demo Ahhh yes, that does complicate things somewhat! I've re-worked the solution to be a lot more generic and I think I have it working. The new demo creates all the datepicker objects in one go. There were a couple of tricky parts, namely the generic clearing of the "next" <input> elements and correctly determining which <input> to clear when the "clear" button is pressed. I was not aware that there is only one datepicker. So it's a bit of a hack as it just sets a jQuery .data() property on the input that has the datepicker visible and then use that to clear the correct one later. Note that in this demo it still resets all subsequent inputs if one is cleared, i.e. "clearing" the first clears 2 and 3 but clearing the second only clears the 3rd.

这篇关于重置日期范围约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！