datepicker 選択不可日を動的に変更する方法

動的に選択不可日を変更したいところで以下を記述する。

$('.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, ”]を返せば選択可となる。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です