jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際は大体jQueryプラグインのDateTimePickerというものを利用していた。ただ、今回は機能的な問題でjQuery UIのDatepickerを利用することになったので使い方をメモ。

リファレンス

https://js.studio-kingdom.com/jqueryui/widgets/datepicker

CDN呼び出し

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

各種ソース&サンプル

オプション無しの基本的な呼び出し方

$("#date").datepicker({});

年月日のフォーマットを指定の上で、本日～30日後まで選択可能

$("#date").datepicker({
	minDate: 0, //最小は本日まで
	maxDate: 30, //最大は30日後まで
	dateFormat: 'yy/mm/dd', //年月日のフォーマット
});

https://taitan916.info/sample/jquery-ui-datepicker/index2.php

特定の日にClass付与&選択不可

//特定の日指定
var sample_holiday = ['2021-06-23', '2021-07-01']

$("#date").datepicker({
	minDate: 0, //最小は本日まで
	maxDate: 30, //最大は30日後まで
	dateFormat: 'yy-mm-dd', //年月日のフォーマット
	beforeShowDay: function(date) {

		//特定の日にClass付与&選択不可
		for (var i = 0; i < sample_holiday.length; i++) {
			var holiday = new Date(Date.parse(sample_holiday[i]));
			if (holiday.getYear() == date.getYear() &&
				holiday.getMonth() == date.getMonth() &&
				holiday.getDate() == date.getDate()) {
				return [false, 'sample_holiday', null];
			}
		}

		return [true, 'day-weekday', null];
	},
});

[false, 'sample_holiday', null]

https://taitan916.info/sample/jquery-ui-datepicker/index3.php

所感

jQueryプラグインのDateTimePickerで困った時にGoogle検索するとjQuery UI版の情報がヒットすることが多い。これを機にjQuery UI版にのりかえるのもありかと思った。