動的に選択不可日を変更したいところで以下を記述する。
$('.xxxx').change(function(){
let holidays = "選択不可日";
$("#datepicker").datepicker( "option", "beforeShowDay", function (date) {
var ymd = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2);
if (holidays.indexOf(ymd) != -1) {
// 選択不可
return [false, 'ui-state-disabled'];
} else {
// 選択可
return [true, ''];
}
});
});
holidays変数にAjaxなどで選択不可日を設定する。
日付フォーマットは、”yyyymmdd”とする。
複数存在する場合はカンマ区切りとする。
※後のymd変数の文字列がholidaysに存在するかの判定なのでカンマでなくても良い。
つまり、beforeShowDayオプション(関数)で
[false, ‘ui-state-disabled’]を返せば選択不可となり
[true, ”]を返せば選択可となる。