0

ASP Classic ページに次の 3 つの入力ボックスがあり、それぞれ対応する jquery datepicker カレンダーに関連付けられています。

<br />
Start Date: <input type="text" id="dtpDateStart" name="dtpDateStart" />
<br />
<br />
End Date:   <input type="text" id="dtpDateEnd" name="dtpDateEnd" />
<br />
<br />
Return By:  <input type="text" id="dtpDateReturn" name="dtpDateReturn" />
<br />

そして、JQuery スクリプト:

<script type="text/javascript">
$(function () {
    $("#dtpDateStart").datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        onClose: function (selectedDate) {
            $("#dtpDateEnd").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#dtpDateEnd").datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        onClose: function (selectedDate) {
            $("#dtpDateStart").datepicker("option", "maxDate", selectedDate);
            $("#dtpDateReturn").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#dtpDateReturn").datepicker({
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'm/d/yy',
        onClose: function (selectedDate) {
            $("#dtpDateEnd").datepicker("option", "maxDate", selectedDate);
        }
    });

});

開始日カレンダー (dtpDateStart) で日付を選択すると、終了日 (dtpDateEnd) カレンダーでは、開始日の後の日付のみが表示されます。返却日カレンダー (dtpDateReturn) についても同様です。

しかし、機能的にさらに 2 つの項目を追加する必要があります。

  1. ページの読み込み時に、今日の日付を Start および End 入力フィールドに入力し、明日の日付を ReturnBy 入力フィールドに入力します。

  2. StartDate が変更された場合、EndDate フィールドと ReturnByDate フィールドが同じ日付 (または +1) に自動的に更新されます。既に含まれている日付が StartDate より前の場合 (そうでない場合は、StartDate より後の場合はそのままにしておきます)。

次の単純なカレンダーで最初のアイテムが別の場所で機能しています。

$("#jqDatePicker").datepicker("setDate", new Date);

しかし、それを上記の関数にまとめることができないようです。

助言がありますか?

4

1 に答える 1