Question

我使用jQuery UI datepicker填写表单中的两个字段。日期字段中的初始文本是“到达日期”和“出发日期”，我的意图是当字段成为焦点时文本消失。表单的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>

然后使jQuery代码全部发生就是

$("#ArrivalDate").datepicker({
        dateFormat: "d M yy",
        minDate: 0,
        showOtherMonths: true,
        selectOtherMonths: true,
        onClose: function () {
            var DepDate = $('#DepartureDate');
            var limitDate = $(this).datepicker('getDate');
            //add 1 day to Arrival Date
            limitDate.setDate(limitDate.getDate() + 1);
            DepDate.datepicker('option', 'minDate', limitDate);
            $(this).datepicker('option', 'minDate', minDate);
        }
    });
    $('#DepartureDate').datepicker({
        dateFormat: "d M yy",
        showOtherMonths: true,
        selectOtherMonths: true
    });

这样可行，但是使用了日期选择器来选择到达日期，文本已从出发日期输入字段中消失。我希望文本“出发日期”保持在那里，直到光标放在框中。

我发现删除了这行

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

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

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

Answer 1

将为DepartureDate输入设置minDate的代码移动到DepartureDate datepicker的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);
    }
});

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

jQuery UI Datepicker，设置minDate

1 个答案: