jQuery UI日期选择器，设置minDate

我使用jQueryUIDatePicker在表单中填写两个字段。日期字段中的初始文本是到达日期和离开日期，我的目的是在字段聚焦时文本消失。表单的html是

<form action="/book/book1.php" method="post" target="_blank" id="bookboxform" name="bookboxform">
<input name="ArrivalDate" id="ArrivalDate" value="Arrival Date">
<input name="DepartureDate" id="DepartureDate" value="Departure Date"> 
<a href="javascript:void()" onclick="document.bookboxform.submit()" class="buttonBook">Enquire or Book</a>
</form>

这是可行的，但使用datepicker选择到达日期后，文本已从“出发日期”输入字段中消失。我想文本出发日期留在那里，直到光标被放置在框中

我发现删除该行

DepDate.datepicker('option', 'minDate', limitDate);

克服了这个问题，但引入了一个新的问题：现在可以在到达日期之前输入出发日期

---

有什么方法可以让文本挂起并设置minDate吗？

将为DepartureDate输入设置minDate的代码移动到DepartureDate选择器的beforeShow函数。我还添加了相同的功能，因此如果DepartureDate中有日期，ArrivalDate选择器只显示前一天的日期

$("#ArrivalDate").datepicker({
    dateFormat: "d M yy",
    minDate: 0,
    showOtherMonths: true,
    selectOtherMonths: true,
    beforeShow: function () {
        if (Date.parse($('#DepartureDate').val())) {
            var maxDate = $('#DepartureDate').datepicker('getDate');
            maxDate.setDate(maxDate.getDate() - 1); //subtract a day
            $("#ArrivalDate").datepicker("option", "maxDate", maxDate);
        }
    }

});

$('#DepartureDate').datepicker({
    dateFormat: "d M yy",
    showOtherMonths: true,
    selectOtherMonths: true,
    beforeShow: function () {
        var minDate = $('#ArrivalDate').datepicker('getDate');
        minDate.setDate(minDate.getDate() + 1); //add a day
        $("#DepartureDate").datepicker("option", "minDate", minDate);
    }
});

---

这并不是涵盖所有可能的场景以确保出发日期晚于到达日期的代码，它只是解决了您发布的特定问题。您可以在两个选择器上使用onClose函数来检查另一个选择器是否包含无效日期，并在需要时将其清除。

如果另一个字段包含无效日期，则可以使用一些添加代码来重置该字段。如果用户手动编辑字段，就会发生这种情况：为了相对简单，我选择了上面答案中所示的版本。谢谢，托尼。

$("#ArrivalDate").datepicker({
    dateFormat: "d M yy",
    minDate: 0,
    showOtherMonths: true,
    selectOtherMonths: true,
    beforeShow: function () {
        if (Date.parse($('#DepartureDate').val())) {
            var maxDate = $('#DepartureDate').datepicker('getDate');
            maxDate.setDate(maxDate.getDate() - 1); //subtract a day
            $("#ArrivalDate").datepicker("option", "maxDate", maxDate);
        }
    }

});

$('#DepartureDate').datepicker({
    dateFormat: "d M yy",
    showOtherMonths: true,
    selectOtherMonths: true,
    beforeShow: function () {
        var minDate = $('#ArrivalDate').datepicker('getDate');
        minDate.setDate(minDate.getDate() + 1); //add a day
        $("#DepartureDate").datepicker("option", "minDate", minDate);
    }
});