勉強したことのメモ

webプログラマが勉強したことのメモ。

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

 - jQuery, JavaScript

  関連記事

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

javascriptでスクロール

やりたかった事は、 ・javascript,jQuery使う ・スクロールさせた ...

セレクトメニューにサジェスト機能をつける(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

JavaScriptでAjaxを使わずにクロスドメインから変数を取得する

JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...

POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

tableのヘッダーを残して表示(jquery-decapitate)

bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...

JavaScriptのvarとletとconst

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...