beforeShowDayは、jQuery UIのDatepickerで特定の日付をカスタマイズするためのオプションです。
この関数を設定することで、日付ごとにスタイルや選択可否を制御できます。
beforeShowDayの使い方
$("#datepicker").datepicker({
beforeShowDay: function(date) {
// 処理内容
}
});戻り値には次のような配列を記述します。
return [true, "", ""];配列は左から、
- true/false：日付を有効（選択可能）にするかどうか。
- クラス名：日付に適用するCSSクラス名（省略可）。
- ツールチップ：ホバー時に表示されるテキスト（省略可）。
を入れます。クラス名とツールチップは省略OKです。
具体的なbeforeShowDayの活用例
土日の選択を無効化する
$("#datepicker").datepicker({
beforeShowDay: function(date) {
// 土曜・日曜を無効化
var day = date.getDay();
return [day !== 0 && day !== 6, "", "週末は選べません"];
}
});まずvar day = date.getDay();で曜日が取得できます。この例では、「dayが0または6以外ならtrueになる＝土日以外の日付なら選択できる」と返しています。つまり、土日は選択できなくなります。
また、配列の3つめに設定した「週末は選べません」の文字が、日付ホバー時に表示されるようになります。
特定の日付を強調表示
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var highlightDates = ["2024-12-25", "2025-01-01"];
var dateString = $.datepicker.formatDate("yy-mm-dd", date);
if (highlightDates.includes(dateString)) {
return [true, "highlight", "特別な日"];
}
return [true, ""];
}
});この例では、highlightDatesに指定した「2024/12/25」と「2025/1/1」の日付にhighlightというclassをあてて、かつホバー時に「特別な日」と表示させるようにしています。
たとえばCSSで次のように書けば、2024/12/25と2025/1/1の日付の文字が赤色になります。
.highlight a {
color: red !important;
}