Question

您好，我在此页JQuery UI DatePicker using 2 date fields trying to get date difference

中找到了以下代码

但是我不明白datepicker ui足以能够阻止第一个datepicker让你只从今天的日期中选择。我确定它很简单，但有人可以帮忙！

<script type="text/javascript">
    var DatePicked = function() {
            var departure = $("#CheckIn");
            var arrival = $("#CheckOut");
            var nights = $("#Nights");

            var triggeringElement = $(this);

            var minArrivalDate = new Date();

            var departureDate = departure.datepicker("getDate");

            if (departureDate != null) {
                    minArrivalDate.setDate(departureDate.getDate() + 1);
            } else {
                    minArrivalDate.setDate(minArrivalDate.getDate() + 1);
            }
            arrival.datepicker('option', 'minDate', minArrivalDate);

            var arrivalDate = arrival.datepicker("getDate");

            if (departureDate != null && arrivalDate != null && triggeringElement.attr("id") != "Nights") {
                    var oneDay = 1000*60*60*24;
                    var difference = Math.ceil((arrivalDate.getTime() - departureDate.getTime()) / oneDay);
                    nights.val(difference);
            } else if (departureDate != null && triggeringElement.attr("id") == "Nights") {
                    var nightsEntered = parseInt(nights.val());
                    if (nightsEntered >= 1) {
                            var newArrivalDate = new Date();
                            newArrivalDate.setDate(departureDate.getDate() + nightsEntered);
                            arrival.datepicker("setDate", newArrivalDate);
                    } else {
                            alert("Nights must be greater than 1.");
                    }
            }
    }
    $(function() {
            $("#CheckIn, #CheckOut").datepicker({
                    onSelect: DatePicked
            });
            $("#Nights").change(DatePicked);
            DatePicked();
    });
</script>

形式：

<form class="enquiry" action="assets/scripts/booking.php" method="get" name="Booking">
<div class="Widget_Form_Spacer">
<label for="CheckIn">Check-In</label>
<input id="CheckIn" name="CheckIn" type="text" class="tF bL" value="<?php echo date("m/d/Y"); ?>" />
</div>
<div class="Widget_Form_Spacer Right">
<label for="CheckOut">Check-Out</label>
<input id="CheckOut" name="CheckOut" type="text" class="tF bL" value="" />
</div>
<div class="Widget_Form_Spacer Short">
<label for="Nights">Nights</label>
<input id="Nights" name="Nights" type="text" class="tF nL" value="1" onclick="clickclear(this, '1')" onblur="clickrecall(this,'1')" />
</div>
<div class="Widget_Form_Spacer Short">
<label for="Adults">Adults</label>
<input name="Adults" type="text" class="tF nL" value="1" onclick="clickclear(this, '1')" onblur="clickrecall(this,'1')" />
</div>
<div class="Widget_Form_Spacer Long">
<input name="Check" type="submit" value="Check Availability" />
</div>
</form>

Answer 1

您可以使用minDate jquery UI datepicker选项：

$("#date").datepicker({ minDate: new Date() });

Live DEMO

JQuery多个日期选择器来自和预订表格

1 个答案: