jquery - 重置日期范围限制

Question

我正在以相当复杂的形式使用 jQueryUI 和 datepicker。我有一组 4 个日期选择器，它们都相互依赖。例如，在日期选择器 A 中选择日期会导致日期选择器 B 的有效日期范围发生更改。

这可以通过使用日期选择器的 onSelect 选项轻松实现:

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

现在出现了有问题的用例:由于不需要这些字段，因此允许用户执行以下步骤:

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

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

但真正的问题来了:在用户从输入字段中手动删除他的日期后，我没有“重置”逻辑的钩子(Hook)，又名。删除之前应用于日期选择器 B 的限制。 onSelect 未触发，但据我所知，也没有其他任何情况。

重置我的逻辑的唯一方法是在日期选择器输入字段上放置一个模糊监听器，每次都会检查该值是否为空？ 是这样的话，那么我确实将日期选择器小部件中省略清晰的机制视为一个主要错误。如果该小部件允许我限制其他日期选择器小部件的日期，那么它也应该允许我解除这些限制。

免责声明:这篇文章与此 question 部分重复。 ，但唯一的 awnser 指向无法正常工作的 js“hack”(更改月份时清除按钮消失)。我还查看了Ticket #3999来自 jQuery 问题管理。它被关闭为“wontfix”:/

感谢您的帮助。

Answer 1

我不知道日期选择器丢失了“清除”按钮!我开始研究这个并尝试制定一个不依赖于添加另一个元素或假设用户知道按 Esc 关闭小部件的解决方案。尽管您可以向用户解释该功能，这可能会解决您的问题;-)

所以 I made a demo 其中我将“关闭”按钮文本替换为“清除”。我添加了一个额外的 jQuery mouseup delegated我的新“清除”按钮上的事件将在标准日期选择器事件触发之前清除输入。

因此，单击“清除”或使用 退格键 删除日期，然后使用 Esc 关闭日期选择器会将第二个输入恢复为默认日期选择器状态。

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

希望这就是您正在寻找的:-)

编辑:Updated demo啊啊是的，这确实让事情变得有些复杂了!我已经重新设计了该解决方案，使其更加通用，并且我认为我已经可以使用它了。新的演示一次性创建了所有日期选择器对象。有几个棘手的部分，即“下一个”<input> 的通用清除。元素并正确确定哪些 <input>当按下“清除”按钮时清除。我不知道只有一个日期选择器。所以这有点像黑客，因为它只是设置了一个 jQuery .data()具有可见日期选择器的输入上的属性，然后使用它来清除正确的日期选择器。请注意，在此演示中，如果清除了一个输入，它仍然会重置所有后续输入，即“清除”第一个输入会清除 2 和 3，但清除第二个输入只会清除第 3 个输入。