jQuery UIのDatepickerを使ってフォームの日付入力欄をカスタマイズする方法

2023.06.20　Posted by Coding_team

Webプログラミング

フォームの日付入力欄をカスタマイズできる「Datepicker」をご紹介します。

Datepickerを使用すると、カレンダーを表示したり、その他にも次のような機能を追加できます。

年月のドロップダウンを追加する
日付のフォーマットを指定する
前日以前は選択不可にする
特定の曜日を選択不可にする

その他にも様々なオプションがあります。

詳しくは公式ページをご覧ください。

実装

まずはDatepickerを実装する方法です。

以下のように、必要なファイルを読み込み、<input>タグを設置。
17行目で<input>タグに対してdatepicker()を実行しています。

<head>
	<!-- jQuery UIのCSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
</head>
<body>
	<!-- 日付入力欄を作成 -->
	<input id="date" type="text">

	<!-- jQuery本体 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<!-- jQuery UI -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<!-- 日本語化ファイル -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/i18n/jquery.ui.datepicker-ja.min.js"></script>
	<script>
	$(function(){
		$('#date').datepicker();
	});
	</script>
</body>

<head>

</head>

<body>

$(function(){

$('#date').datepicker();

});

</script>

</body>

以下がサンプルです。

右側のResultのinputタグをクリックするとカレンダーが表示されるはずです。

See the Pen
Datepicker サンプル by weblab kanai (@weblab_kanai)
on CodePen.

オプション

datepicker()を実行する際、次のようにオプションを指定することができます。

$('#date').datepicker({
	changeYear: true,  // 年をドロップダウンから選択
	changeMonth: true,  // 月をドロップダウンから選択
	minDate: new Date() // 前日以前は選択不可に
});

$('#date').datepicker({

changeYear: true, // 年をドロップダウンから選択

changeMonth: true, // 月をドロップダウンから選択

minDate: new Date() // 前日以前は選択不可に

});

指定した内容がカレンダーに反映されました。

See the Pen
Untitled by weblab kanai (@weblab_kanai)
on CodePen.

その他のオプションについては公式ページをご覧ください。

特定の曜日を選択不可にする

Datepickerのオプションを使って特定の曜日を選択不可にするサンプルをご紹介します。

以下のコードをご覧ください。

$("#date").datepicker({
	beforeShowDay: function (date) {
		//0(日曜)または6(土曜)のとき
		if (date.getDay() == 0 || date.getDay() == 6) {
			return [false, "ui-state-disabled"];
		}else{
			return [true, ""];
		}
	}
});