HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jQuery UI Datepicker(カレンダー)指定日の選択を無効

jQuery UI Datepicker で水曜日、日曜日、祝日など指定日をカレンダーで選択できなくする方法をご紹介します。

このサンプルでは、祝日は3日だけですが配列で確保しています。水曜日と日曜日の判定は Date オブジェクトの getDay() で判定します。

jQuery UI Datepicker の beforeShowDay イベントのパラメータとして渡される日付が、 水曜日、日曜日か指定日にあたるか判定して、それぞれのスタイルとともに false をリターンすることで選択を無効にすることができます。

日付:

コード


$(function() {
    // 祝日を配列で確保
    var holidays = [ '2012-10-08', '2012-11-03', '2012-12-24' ];

    $("#datepicker").datepicker({
            numberOfMonths: [1,2],
            beforeShowDay: function(date) {
            // 祝日の判定
            for (var i = 0; i < holidays.length; i++) {
                var htime = Date.parse(holidays[i]);    // 祝日を 'YYYY-MM-DD' から time へ変換
                var holiday = new Date();
                holiday.setTime(htime);                 // 上記 time を Date へ設定

                // 祝日
                if (holiday.getYear() == date.getYear() &&
                    holiday.getMonth() == date.getMonth() &&
                    holiday.getDate() == date.getDate()) {
                    return [false, 'holiday'];
                }
            }
            // 日曜日
            if (date.getDay() == 0) {
                return [false, 'sunday'];
            }
            // 土曜日
            if (date.getDay() == 6) {
                return [true, 'saturday'];
            }
            // 水曜日
            if (date.getDay() == 3) {
                return [false, ''];
            }
            // 平日
            return [true, ''];
        },
        onSelect: function(dateText, inst) {
            $("#date_val").val(dateText);
        }
    });
    // サンプル用のデフォルト日付
    $("#datepicker").datepicker("setDate", new Date(2012, 10 - 1, 30)); // -1 for 0 based month.
});
	

HTMLコード


<style>
    .sunday .ui-state-default {
      color: red;
    }

    .saturday .ui-state-default {
      color: blue;
    }

    .holiday .ui-state-default {
      color: red;
    }
</style>

<div id="datepicker"/>
<p>日付: <input type="text" id="date_val" value=""/></p>
	

関連リンク