jQuery ui は、datepicker プラグインを使用して開始日 (minDate) と終了日 (maxDate) を実装します_jquery

jQuery ui を使用するには、まず jQuery クラス ライブラリ、jQuery ui js スクリプト、および jQuery ui css スタイル シートを導入する必要があります。コード例は次のとおりです:

コードをコピー コードは次のとおりです:

< ;link rel ="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">

注: js スクリプトを導入するときは、最初に jQuery クラス ライブラリを導入し、次に jQuery ui スクリプトを導入する必要があります

次の 2 つの実装手順:

アイデア 1:

最初のステップは、2 つの datepicker コンポーネントを実装することです。

2 つの入力タグを定義し、テキストを入力し、id 属性を指定する必要があります

HTML コードは次のとおりです

コードをコピー コードは次のとおりです:

開始日:
終了日:

js コード内の 2 つの入力要素の jQuery オブジェクトを取得し、それらを datepicker コンポーネントに変換します

Js コードは次のとおりです

コードをコピー コードは次のとおりです。

$(document).ready(function( ）{

上記の操作を実行した後、ページ上のテキスト ボックスをクリックすると、日付ピッカーが表示されます。

ステップ 2 開始日と終了日を設定します

開始日の値が選択されている場合は、終了日の最小値が開始日である必要があります。同様に、終了日が選択されている場合は、開始日の最大値が終了日である必要があります。日付ピッカーの onSelect 属性を使用して、指定された日付が選択されたときにトリガーされるイベントを設定し、このイベントを使用して、対応する日付ピッカーの最小日付または最大日付を指定できます。

Js コードは次のとおりです

コードをコピー

コードは次のとおりです:$("#start").datepicker ({ onSelect:function(dateText,inst){ $("#end").datepicker("option","minDate",dateText);

}

});
$( "#end").datepicker({
onSelect:function(dateText,inst){
$("#start").datepicker("option","maxDate",dateText);
}
});



注: 匿名関数の dateText 属性は、現在選択されている日付の文字列です

アイデア 2:

最初のステップは、2 つのテキスト ボックス オブジェクトを同時に取得し、それらを (jQuery のセレクターを使用して) datepicker に変換することです

HTML コードは次のとおりです

コードをコピー

コードは次のとおりです:開始日: 終了日:

Js コードは次のとおりです

コードをコピーします

コードは次のとおりです。var date = $("#start, #end" );dates.datepicker();

2 番目のステップ: 日付を選択した後、onSelect イベントをトリガーし、関数を呼び出して selectedDate パラメーターを渡します。

関数本体では、まずトリガー イベントが開始日であるか終了日であるかを判断し、この判断を使用して minDate または maxDate を指定して設定し、次に not() 関数を使用して別の datepicker オブジェクトを逆に選択し、そのオブジェクトを設定します。対応するプロパティ。

Js コードは次のとおりです

コードをコピー

コードは次のとおりです。dates.datepicker({ onSelect : function( selectedDate){ var option = this.id == "start" ? "minDate" : "maxDate";

dates.not(this).datepicker("option", option, selectedDate);

}
});

このように、一方のパーティーを設定すると、もう一方のパーティーが制限されます。

達成される効果は以下のとおりです: