1

こんにちは、このページJQuery UI DatePicker から次のコードを見つけました 2 つの日付フィールドを使用して日付の違いを取得しようとしています

ただし、最初の日付ピッカーが今日の日付からのみ選択できるようにするのを止めることができるほど、日付ピッカーのUIを理解していません。シンプルだと思いますが、誰か助けてください！

<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>
4

1 に答える 1

1

minDate jqueryUIdatepickerオプションを使用できます。

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

ライブデモ

于 2012-06-26T18:34:02.867 に答える