javascript - jQuery datepicker- 具有 3 个字段的范围？

Question

我正在创建一个 Web 表单，并且有以下 3 个使用日期选择器的输入字段:到达时间、开始日期和结束日期。 (用于贸易展览)

cargo 需要在“到达”日期之前到达，并且贸易展览从“开始日期”持续到“结束日期”。

我能够为“开始日期”和“结束日期”字段创建范围，但现在客户希望确保开始/结束范围不能早于“到达”日期，并且什么都不能当前日期之前。

我假设如果我将“到达”日期限制为无法选择早于当前日期的日期，然后将输入的“到达”日期强加为“开始日期”范围的开始，我将实现他们想要什么。 (在输入到达日期之前，我是否需要禁用开始/结束字段？)

不幸的是，这似乎需要大量高级代码，这有点超出了我的技能范围。希望有人能让我朝着正确的方向开始。

Answer 1

您有几个选择。您可以在提交时进行验证，以确保用户选择满足要求的适当日期，或者您可以使用日期选择器 restrict date range根据其他日期选择器的选定值来限制可用日期的选项。看看日期选择器select a date range功能以了解如何设置最小/最大可选日期。

这是一个示例 JSFiddle这证明了这一点。这尚未经过彻底测试，因此您可能必须尝试该行为才能完全按照您想要的方式进行操作(例如，您可能希望在更改 to 日期时也更改 arrive 最短日期)。

HTML:

<label for="arrive">Arrive</label>
<input type="text" id="arrive" name="arrive">
<br />
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

Javascript:

$("#arrive").datepicker({
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "minDate", selectedDate);
    }
});
$("#from").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
        $("#arrive").datepicker("option", "maxDate", selectedDate);
    }
});
$("#to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    }
});