今更jQuery UIですか? とは自分でも思わなくもないんだけども実際便利なんだもんこれ。
楽だし。まだまだjQuery離れはできそうにないや。
<script>
jQuery(function() {
// 臨時休業日
const temporary_holidays = ['2021-08-25','2021-08-26'];
// 定休日 0は日曜 6は土曜
const holidays = [0, 6];
jQuery('#target').datepicker(
{
dateFormat: 'yy-mm-dd',
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var ymd = year + '-' + month + '-' + day;
if (temporary_holidays.indexOf(ymd) !== -1) {
return [false];
}
if (holidays.indexOf(date.getDay()) !== -1) {
return [false];
}
return [true];
}
}
);
});
</script>
Datepickerを設定する際に、 beforeShowDayってオプションを利用すれば良い。
このオプションに設定した関数は、カレンダーの日付セルが書き出される直前に都度実行される。
関数の実行結果でtrueが返ってきたセルは有効となり、falseだったら無効になるって寸法。
あとはまあ、特定の日付だったら、あるいは特定の曜日だったらfalseを返す処理を関数内に仕込めばOKってわけ。
実際に上記のスクリプトを適用したinput欄が↓になります。