HARD DAY'S NIGHT別館

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

jQuery UI Datepicker(カレンダー)土・日・祝日の表示色の変更

jQuery UI Datepicker で土曜日、日曜日、祝日など指定日の色を変える方法をご紹介します。

このサンプルでは、祝日は3日だけですが配列で確保しています。実務ではここは動的に取得して生成したほうが良いでしょう。
土曜日と日曜日の判定は Date オブジェクトの getDay() で判定します。

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

日付:

コード


$(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 [true, 'holiday'];
                }
            }
            // 日曜日
            if (date.getDay() == 0) {
                return [true, 'sunday'];
            }
            // 土曜日
            if (date.getDay() == 6) {
                return [true, 'saturday'];
            }
            // 平日
            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>
	

関連リンク