jQuery uiでフォームにカレンダーを表示する

こんにちは。開発部・アニマル部署統括のPです。

予約システムや予約フォームなどで、ユーザーに日付を選択してもらいたいときなどありますよね。
直接の日付入力やセレクトボックスを選択させる方法もありますが、入力作業が面倒で直感的に操作しずらいものです。

今回は特別なプラグインを使わなくても簡単にカレンダーが実装できる、
「jQuery ui」というライブラリ使った実装方法をご紹介します。

「jQuery ui」はドラッグ移動・カレンダー表示・ダイアログ処理などをサポートしてくれるツールです。

日付を選択

まずはjqeuryとjquery ui を読み込みます。

【html head内】

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

今回jqueryのバージョンは3.4.1、jquery uiは1.12.1（公式をみても2021/3/24 時点かなり古そうですが、これが最新っぽい^^;）です。

【続いて入力項目の部分です。】

<form method="post" action="TODO">
<p>日付を選択<input type="text" id="datepicker"></p>
</form>

<p>日付を選択<input type="text" id="datepicker"></p>

</form>

【head内もしくはbodyの閉じタグ直前に以下を記述します。】

<script>
	$(function() {

		var ngDate = ['20210401','20210402','20210403'];

		$("#datepicker").datepicker({

			minDate: 0,	// 過去日付は選択NG
        		maxDate: '+3m',	// 3か月以上先は選択NG

			// カレンダーを作成するときに対象日付がngDateの配列内に存在しないチェックします
			beforeShowDay: function(date){
				var result;
				var target_date = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' +  date.getDate()).slice(-2);
				if (ngDate.indexOf(target_date) != -1) {	// -1は配列内に見つからなかったときに帰ってくる値
					result = [false];	// 配列にセットすること
				} else {
					result = [true];	// 配列にセットすること
				}
				return result;
			},
		});
	});
</script>

$(function() {

var ngDate = ['20210401','20210402','20210403'];

$("#datepicker").datepicker({

minDate: 0, // 過去日付は選択NG

maxDate: '+3m', // 3か月以上先は選択NG

// カレンダーを作成するときに対象日付がngDateの配列内に存在しないチェックします

beforeShowDay: function(date){

var result;

var target_date = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2);

if (ngDate.indexOf(target_date) != -1) { // -1は配列内に見つからなかったときに帰ってくる値

result = [false]; // 配列にセットすること

} else {

result = [true]; // 配列にセットすること

}

return result;

});

</script>

基本予約フォームなどでは過去日付を選択させないようにしたいので、
datepickerの呼び出し時に「minDate: 0」を指定。

さらに、
数か月先以降を指定してほしくない場合は（上記の例だと3か月先）「maxDate」で指定できます。

そのほか休業日やスタッフがいない日などを指定したい場合は
「beforeShowDay（カレンダー作成前に呼び出されるメソッド）」で対応不可の日付を入れれば、その日は選択できないようになります。

詳しいオプションなどはhttps://api.jqueryui.com/datepicker/に記載がありますので是非参考にしてみてください。

カレンダーのスタイルなどは
上書き可能なのでお好みの見た目に変更もできますよ！

ではでは～(=ﾟωﾟ)ﾉ

タグ：css,html,JavaScript

2021.03.24

Blog