jQuery Datepickerの曜日に色を付ける
2014年03月23日(日) 12時23分
はじめに
Datepickerで土日や祝日、定休日等に色をつけたり、選択できなくしたりする方法をご紹介します。
Datepickerを使う時は、かなりの頻度で必要になるのではないでしょうか？
概要
beforeShowDayは、DatePickerが設定されたフィールドが選択され、カレンダーが表示される前にその月の日数回実行されます。
毎回、引数にDate型の日付を引数として受け取りますので、それを使って判定し結果を戻します。
今回の場合、配列に設定した祝日リストと比較し、一致する場合は、祝日と判定しています。
判定結果によって、3つの値を持った配列を結果として戻します。[true/false, '文字列', '文字列']
beforeShowDayの戻り値 1
日付の選択可否をtrue/falseで設定します。
定休日など、日を選択/入力させたくない日は、ここをfalseに設定します。
簡単に日曜日だけ選択できないようにする事などが可能です。
$('#Date').datepicker({
beforeShowDay: function(date) {
if (date.getDay() == 0) {
return [false, '', ''];
}
}
});
beforeShowDayの戻り値 2
カレンダー上の日に付与されるクラス名です。
ここで任意のクラス名を設定し、具体的なスタイリングはCSSで調整します。
// CSS style
.class-store-closed {
ここにスタイリングする
}
$('#Date').datepicker({
beforeShowDay: function(date) {
if (date.getDay() == 0) {
// クラス名を設定
return [false, 'class-store-closed', ''];
}
}
});
beforeShowDayの戻り値 3
カレンダー上の日にマウスを合わせた時のポップアップ文字です。
不要な時は、''(空文字)を設定します。
応用
これを応用すると、祝日のスタイリングや定休日の選択付加など、状況に合わせたカスタマイズが可能です。
// 祝日リスト (※ 最近の祝日は計算が複雑なので自動化は今回の対象外)
var holidays = ['2014-01-01', '2014-01-13', '2014-02-11', '2014-03-21', '2014-04-29', '2014-05-03', '2014-05-04', '2014-05-05', '2014-07-21', '2014-09-15', '2014-09-23', '2014-10-13', '2014-11-03', '2014-11-23', '2014-12-23', '2014-12-24'];
$('#Date').datepicker({ // 土日祝日色変更
beforeShowDay: function(date) {
for (var i = 0; i < holidays.length; i++) {
var holiday = new Date();
holiday.setTime(Date.parse(holidays[i])); // 祝日を日付型に変換
if (holiday.getYear() == date.getYear() && // 祝日の判定
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [true, 'class-holiday', '祝日'];
}
}
if (date.getDay() == 0) { // 日曜日
return [true, 'class-sunday', '日曜日'];
} else if (date.getDay() == 6) { // 土曜日
return [true, 'class-saturday', '土曜日'];
} else { // 平日
return [true, 'class-weekday', '平日'];
}
}
});
//* 背景/文字の色 *//
// ※ クラスが設定される要素の子要素に表示用のスタイリングを付与する
.class-holiday > .ui-state-default {
background: #FFFFCC !important;
color: red !important;
}
.class-sunday > .ui-state-default {
background: #FFCCCC !important;
color: red !important;
}
.class-saturday > .ui-state-default {
background: #CCCCFF !important;
color: blue !important;
}
ほかのオプションはこちらをご参照下さい。