DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し、尚且つカレンダーから選択不可の状態にしたかった。jQuery UIのDatepickerなら特定の日にClassを付与するオプションがあった為、過去記事のように容易に実装できたが本プラグインではそのようなオプションが無いので少々苦労した。以下に対応方法をメモ。

サンプル

https://taitan916.info/sample/datetimepicker4/

上記サンプルでは2021-07-01及び2021-07-15を特定日としている。

ソース

	<script>
	$(function(){

		//特定の日指定
		const sample_holiday = ['2021-07-01', '2021-07-15'];

		$.datetimepicker.setLocale('ja');
		$('#date').datetimepicker({
			timepicker:false,
			format: 'Y-m-d', 
			disabledDates: sample_holiday, //選択不可の日付を指定
			formatDate: 'Y-m-d', 
			scrollMonth : false,
			scrollInput : false,
			onGenerate: holidayCheck, 
			onShow: holidayCheck,
			onChangeMonth: holidayCheck,
			onClose: holidayCheck, 
		});

		function holidayCheck(){
			setTimeout(function(){
				$('.xdsoft_calendar td').each(function(){
					var $d = $(this);
					var Y = $d.data('year');
					var M = $d.data('month') + 1;
					var D = $d.data('date');
					var ymd = [Y, ('0' + M).slice(-2), ('0' + D).slice(-2)].join('-');

					//特定日の場合Class付与
					if( sample_holiday.includes(ymd) ){
						$d.addClass('sample_holiday');
					}
				});
			}, 50);
		}

	});
	</script>

特定の日指定

配列方式で以下のように日付を指定する。

const sample_holiday = ['2021-07-01', '2021-07-15'];

カレンダーから選択不可

オプション項目で指定可能。以下のように指定する。

disabledDates: sample_holiday,

Classを付与

holidayCheck関数で日付をチェックし、特定日にClassを付与している。また、カレンダー作成時(onGenerate)、カレンダー表示時(onShow)、カレンダーの月変更時(onChangeMonth)、カレンダーを閉じる時(onClose)にholidayCheck関数を走らせている。

尚、カレンダー作成・表示・月変更・閉じる際に動的にClassが割り当てられているっぽいので、setTimeoutで後からClassを付与する形になる。

別のClassを付与したい場合

サンプルのソースだと「sample_holiday」配列の日付に対して同名のClassを付与しているが、例えば同じカレンダー内で「discount_day」という日付に同名のClassを付与したいといった場合があったとする。その場合は「discount_day」配列を定義し、holidayCheck関数内に以下を追加する。

//特定日の場合Class付与
if( discount_day.includes(ymd) ){
	$d.addClass('discount_day');
}

注意点

Class付与部分は多少力技っぽいのでブラウザによっては正常に動作しない可能性あり。2021年6月時点だとChrome / Edge / Firefoxは動作したがIE11では動作しなかった。

所感

jQueryプラグインのDateTimePikerで対応するのは若干面倒な点と動作が不安定な点を考慮するとjQuery UIを使った方が無難っぽい。特に動作が不安定な点は後々不具合対応等で時間が取られそうで怖い。

参考サイト

http://cmz.wp.xdomain.jp/archives/1065