3

2つのJQuery日付フィールドがあります

  1. 到着
  2. 出発

到着日は今日の日付であってはなりません-私はこれをJavaScriptでminDate：1を使用してソートしました

出発日は常に到着日の2日以上前でなければなりません。minDate：3が機能すると思いましたが、それは今日の日付からクエリを実行します。ユーザーが到着フィールドで明日の日付を選択した場合は正常に機能しますが、ユーザーが将来の到着日を選択した場合は機能しません。出発日は到着日を参照し、ユーザーが選択できる最小日として2日前に移動する必要があります。基本的に、このホテルを予約する場合、ユーザーは1泊できず、2泊分が必要です。

最後に、到着日から出発日までの宿泊日数を3番目のテキストフィールドに計算する必要があります。そのため、出発日を入力すると、3番目のテキストフィールドに宿泊日数が自動的に入力されます。また、逆に機能する必要があります。ユーザーが宿泊日数を入力することにした場合は、それに応じて出発日を変更する必要があります。

4

3 に答える 3

8

この例は完璧ではないと確信していますが、 jQueryとjQuery UI Datepickerだけを使用して、必要なもののほとんどを備えた実用的なデモを次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Datepicker &amp; Difference</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var DatePicked = function() {
            var departure = $("#departure");
            var arrival = $("#arrival");
            var nights = $("#nights");

            var triggeringElement = $(this);

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

            var minArrivalDate = new Date();
            if (departureDate != null) {
                minArrivalDate.setDate(departureDate.getDate() + 2);
            } 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 >= 2) {
                    var newArrivalDate = new Date();
                    newArrivalDate.setDate(departureDate.getDate() + nightsEntered);
                    arrival.datepicker("setDate", newArrivalDate);
                } else {
                    alert("Nights must be greater than 2.");
                }
            }
        }
        $(function() {
            $("#departure, #arrival").datepicker({
                onSelect: DatePicked
            });
            $("#nights").change(DatePicked);
            DatePicked();
        });
    </script>
</head>
<body>
<div>
    <label for="departure">Departure</label>
    <input type="text" id="departure" name="departure" />
</div>
<div>
    <label for="arrival">Arrival</label>
    <input type="text" id="arrival" name="arrival" />
</div>
<div>
    <label for="nights">Nights</label>
    <input type="text" id="nights" name="nights" />
</div>
</body>
</html>

それをいじって、似たようなものをアプリ/サイトに統合できるかどうかを確認してください。

于 2009-08-12T01:34:27.567 に答える
1

到着と出発の機能を逆にする/交換する必要があると思います。ラベルを変更したところ、状況が明確になりましたが、コードが間違っているように見えます。

于 2009-08-17T23:10:25.473 に答える
1

出発日が当月に固定されていない場合、夜は出発日で適切に追加されません。たとえば、今日の日付は2月25日です。出発日を3月11日に設定し、それを5泊に固定すると、到着日は2月16日に戻ります。3月16日でなければなりません

于 2010-02-25T09:00:45.597 に答える