Question

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

使用datepicker的onSelect选项很容易实现：

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

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

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

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

但是这里出现了真正的问题：在用户从输入字段手动删除了他的日期之后，我没有勾选我的“重置”logik，a.k.a。删除以前应用于日期选择器B的限制。不会触发onSelect，但据我所知，其他任何内容都没有。

是重置逻辑的唯一方法，在每次检查以查看值是否为空的datepicker输入字段上放置模糊侦听器？是不是这样，那么我真的将datepicker小部件中明确机制的概念视为一个主要错误。如果窗口小部件允许我限制其他日期选择器小部件的日期，那么它也应该允许我解除这些限制。

免责声明：这篇文章与此question部分重复，但唯一的一个指向不正确工作的js“hack”（更改月份时清除按钮消失）。我还从jQuery问题管理中查看了Ticket #3999。它被关闭为“wontfix”：/

感谢您的帮助。

Answer 1

我不知道日期选择器丢失了“清除”按钮！我开始研究这个并尝试制作一个不依赖于添加其他元素的解决方案，或者假设用户知道按 Esc 关闭小部件。虽然您可以向用户提供该功能的说明，这可能会解决您的问题; - ）

所以 I made a demo ，其中我已将“关闭”按钮文本替换为“清除”。我在 new “Clear”按钮上添加了一个额外的jQuery mouseup delegated事件，该按钮将在标准的datepicker事件触发之前清除输入。

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

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

希望这就是你要找的东西： - ）

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

Answer 2

您是否考虑过观察日期选择器A上的onClose事件？

onClose: function(dateText, inst) {
  if(dateText == '') {
    //find datepicker B;
    //reverse the valid date range of datepicker B.
  }
},

Answer 3

这是一种黑客攻击，但也许它可以做你想做的事情：

你可以有一个隐藏的输入，上面写着“选择日期”，这是一个布尔值。当用户选择日期时，您将隐藏输入设置为true。

您禁用日期输入。您添加一个“清除”按钮，将输入设置为false并重置B上的日期约束。

在服务器部件上，检查布尔值以查看是否必须处理日期。

Answer 4

以下内容经过测试并有效

<html>
<head>
    <link rel="stylesheet" href="ui/css/ui-lightness/jquery-ui-1.8.11.custom.css">
    <script src="ui/js/jquery-1.5.1.min.js"></script>
    <script src="ui/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script>
        $(document).ready(function() {
           var myClone = $("#foo").clone();

           $("#foo").datepicker();

            $("#resetMe").click(function(e) {
                e.preventDefault();

                $("#foo").remove();

                var localClone = $(myClone).clone();
                $("#fooContainer").append(localClone);
                $(localClone).attr("id", "foo").datepicker();      


            });

        }); 
    </script>

</head>
<body>
    <span id="fooContainer">
        <input id="foo"/>
    </span>
    <a id="resetMe" href="">Changed your mind? - Clear Date</a>
</body>
</html>

重置日期范围限制

4 个答案: