小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQuery「datepicker」を使ってフォームの入力項目にカレンダーを設置

  • 公開日：2020-09-05
  • 最終更新日：2020-09-10

レンタルサービスのサイト制作に携わった際に使用した、jQuery用プラグイン「datepicker」を使ったカレンダーの実装方法をメモ。

datepicker導入の3つの手順

jQueryを利用するのに必要なcssとjsのURLを読み込む

 <!-- JQuery-uiのcss ※Datepickerにデザインを適用するために必要-->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Datepicker日本語化のためのJavascriptをCDNで呼び出す-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

cssのURL中のbaseが jQuery UI のテーマの名前で、ここを変えると見た目の色が変わる。
テーマは ThemeRoller から選択可能。
ページ左側の「 Gallaery 」タブから好みのテーマを選んで、テーマ名を小文字にして CSS のリンクに書く。
テーマ名が「UI darkness」だったらui-darknessと記述。

inputタグを設置し、Datepickerを適応。

HTML

<input type="text" name="○○○○" id="datepicker">

jQuery

$(function(){
	$('#datepicker').datepicker();
});

選択範囲（不可日含む）をオプションで設定

jQuery

$( function() {
	//選択不可日を記入
	var holidays = ['20200921', '20200922'];
	$('#datepicker').datepicker({
		//申込期日はツアー当日の3日前
		minDate: '+3d',
		//本日から1ヶ月後以降の申込は受け付けない
		maxDate: '2m',
		dateFormat: 'yy/mm/dd',
		beforeShowDay: function (date) {
			var ymd = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' +  date.getDate()).slice(-2);
			if (holidays.indexOf(ymd) != -1) {
				//選択不可日の処理（前述[holidays]の設定日）
				return [false, 'ui-state-disabled'];
			} else if (date.getDay() == 0 || date.getDay() == 6) {
				//選択不可曜日の処理（日曜日・土曜日）
				return [false, 'ui-state-disabled'];
			} else {
				//選択可能日
				return [true, ''];
			}
		}
	});
});

用途に合わせて選択範囲をオプションで設定。
上記は選択不可日と選択不可曜日、選択できる範囲の指定を行っている。