【jQuery UI】 datepickerのFrom日付とTo日付の選択範囲を制限する方法

jquery

日付のカレンダー入力をするためのdatepickerですが、日付の選択範囲が制限されているサイトをよく見ます。

[スポンサーリンク]

わたしもdatepickerを使って、日付の開始日(from)と終了日(to)を入力させるロジックを書く時は、選択範囲の制限をよくかけます。
システム上不整合を起こさせないために、終了日(to)は開始日(from)より前の日付が入力できないようにするなどの対策をとっています。

日付の選択範囲は「何でもOK」ではなく、必要に応じて制限するようにしましょう。
不具合を未然に防いでくれます。

この章でやること

datepickerの日付の選択範囲(From-To)を制限する方法を紹介します。

datepickerの日付の選択範囲(From-To)を制限するサンプルソース

jQuery部分のソースコード

    <script>
        $( function() {
            var dates = jQuery( '#datepickerFrom, #datepickerTo' ) . datepicker( {
                showAnim: 'drop',
                changeMonth: true,
                numberOfMonths: 3,
                showCurrentAtPos: 1,
                dateFormat:"yy/mm/dd",
                onSelect: function( selectedDate ) {
                    var option = this . id == 'datepickerFrom' ? 'minDate' : 'maxDate',
                        instance = $( this ) . data( 'datepicker' ),
                        date = $ . datepicker . parseDate(
                            instance . settings . dateFormat ||
                            $ . datepicker . _defaults . dateFormat,
                            selectedDate, instance . settings );
                    dates . not( this ) . datepicker( 'option', option, date );
                }
            } );
        } );
    </script>

HTML部分のソースコード

<body bgcolor="#e2e2e2">
	<form>
		<h5 id="target_title">Fromより過去日付は、Toで指定出来ません。</h5>
		<label >From:</label>
		<input type="text" id="datepickerFrom" placeholder="クリックして下さい"/>
		
		<label >To:</label>
		<input type="text" id="datepickerTo" placeholder="クリックして下さい"/>
	</form>
</body>

デモ

実際に動かすことが出来ます

解説

From日付を選択後、To日付のカレンダーを表示すると、Fromより前の日付は選択できないようにするロジックです。

minDatemaxDateを使用して、選択の可不可を決定しています。
上記のソースだと、ハイライトとなっているソース部分が、範囲選択に関係しているソースです。
4行目から8行目のコードは、選択範囲には関係しないオプションです。(カレンダーの表示方法や、何か月分のカレンダーを表示するかなどの設定)

さいごに

datepickerを使ったシステム(UI)では、FromとToがセットとなっていることが多いです。
もちろん、FromとToの整合性をとることも非常に大事です。
不整合なデータの入力を許可してしまうと、バグにつながる恐れがあります。

今回紹介した方法は、不整合なデータの入力を防ぎます。
また余計なバリデーションエラーを発生させないので、ユーザーへの負担(ストレス)が格段と小さくなります。

FromとToをセットで使う時は、不整合なデータ入力はさせないように気を付けましょう!
それでは!