jQuery カレンダーから日付を入力する(Datepicker)

nas2017/05/05

目次

ライブラリ Datepicker Widgetを利用
サンプル カレンダーのサンプル
  カレンダーに表示する月を増やす
  前の月の31日や次の月の1日も選択できるようにする
  年と月をプルダウン表示にする
  カレンダーの初期日付を設定する
  クリックできる日付の範囲を設定する
  From日付より前は選択不可にする & To日付より後は選択不可にする
  カレンダーに閉じるボタンを追加する
  複数のDatePickerに同じ設定を行う

Datepicker Widget

  • Datepicker Widgetは、jQuery UIのウィジェットでカレンダーの機能です。
  • 入力欄をクリックするとカレンダーが表示され、カレンダーの日付をクリックすると入力欄に日付が入力されます。
  • jqueryのライブラリ(jquery.min.js)に加えて、以下のjquery-uiのライブラリとcssを追加します。
    ・jquery-ui.min.js
    ・jquery-ui.css
    ・jquery.ui.datepicker-ja.min.js (カレンダーを日本語化する場合)
  • 以下はjQuery UIのDatepicker Widgetのリンクです。
    http://api.jqueryui.com/datepicker/

 

カレンダーのサンプル

入力欄をクリックするとカレンダーが表示されます。
カレンダーの日付をクリックすると選択した日付が入力欄にセットされます。

年月日:

 

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<p>年月日: <input type="text" id="input1" /></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script>
	$(function() {
		$.datepicker.setDefaults($.datepicker.regional["ja"]);
		$("#input1").datepicker();
	});
</script>

3行目は、テキスト入力欄です。
10行目は、日本語の設定にしています。
jaをenに変更すると月や曜日の表示が英語になります。
(9月の表記がSeptember、曜日がSu(Sunday)など)
11行目は、セレクタ$("#input1")で3行目のidのinput1を指し、datepickerでカレンダーを開きます。

1行目は、jQuery UIのCSSです。
5～7行目は、このカレンダーを動かすためのjsです。

 

カレンダーに表示する月を増やす

カレンダーに表示する月を増やすサンプルです。

	$("#input1").datepicker({
		numberOfMonths:3 //表示される月の数
	});

2行目は、numberOfMonthsに3を指定しています。
3ヶ月分表示されます。

以下は、サンプルです。

年月日:

 

前の月の31日や次の月の1日も選択できるようにする

前の月の31日や次の月の1日も選択できるようにするサンプルです。

	$("#input1").datepicker({
		showOtherMonths: true, //他の月を表示
		selectOtherMonths: true //他の月を選択可能
	});

2行目は、showOtherMonths(show/Other/months)にtrueを指定しています。他の月を表示します。
3行目は、selectOtherMonths(select/Other/months)にtrueを指定しています。他の月を選択できるようになります。

以下は、サンプルです。

年月日:

 

年と月をプルダウン表示にする

年と月をプルダウン表示にするサンプルです。

	$( "#input1" ).datepicker({
		changeYear: true, //年を表示
		changeMonth: true, //月を選択
		minDate: '-1y -1m',
		maxDate: '+1y +1m'
	});

2行目は、changeYearにtrueを指定しています。年がプルダウン表示になります。
3行目は、changeMonthにtrueを指定しています。月がプルダウン表示になります。
4行目は、ブルダウンに表示される下限の年月を指定しています。現在から1年1ヶ月前まです。
5行目は、ブルダウンに表示される上限の年月を指定しています。現在から1年1ヶ月後まです。
yは年でmは月でdは日です。wは週です。

以下は、サンプルです。

年月日:

 

カレンダーの初期日付を設定する

カレンダーを開いた時の初期日付を設定するサンプルです。

	$( "#input1" ).datepicker({
		defaultDate: new Date(2017,4,5) //2017/5/5を表示
	});

2行目は、defaultDateに日付の2017/5/5を指定しています。
引数の月を指定するときは実際の月より-1します。例の2017,4,5は、2017/5/5になります。

以下は、サンプルです。

年月日:

 

クリックできる日付の範囲を設定する

クリックできる日付の範囲を設定するサンプルです。

	$("#input1").datepicker({
		minDate: new Date(),
		maxDate: '+3d'
	});

2行目は、minDateに今日の日付を指定しています。今日より前の日はクリックできません。
3行目は、maxDateに3日を指定しています。3日より先の日はクリックできません。

以下は、サンプルです。

年月日:

 

From日付より前は選択不可にする & To日付より後は選択不可にする

日付のFromとToの入力欄がある場合で、
Fromのカレンダーで日付を選択すると、Toのカレンダーを開いた時にFromで選択された日付より前の日は非活性で選択できなくなります。
Toのカレンダーで日付を選択すると、Fromのカレンダーを開いた時にToで選択された日付より後の日付は非活性で選択できなくなります。

サンプルです。

from: 　 to:

 

以下は、上記コードのサンプルです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<p>from: <input type="text" id="from1" />　
to: <input type="text" id="to1" /></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script>
$(function() {
  var from1 = $("#from1").datepicker({
        onSelect: function(selectedDate) {
          $("#to1").datepicker("option","minDate",selectedDate);
        }
    });
  var to1 = $("#to1").datepicker({
          onSelect: function(selectedDate ) {
          $("#from1").datepicker("option","maxDate",selectedDate);
        }
    });
});
</script>

3,4行目はFrom～Toの入力欄です。
11行目は、3行目の入力欄に対するカレンダーの設定です。
12行目のonselectは、3行目のカレンダーで日付をクリックしたら実行されます。selectedDateは変数でカレンダーで選択された日付が入ります。
13行目は、4行目のToの入力欄に対して、選択できる最小の日付(minDate)としてselectedDateをoptionで設定しています。

16行目は、4行目の入力欄に対するカレンダーの設定です。
17行目のonselectは、4行目のカレンダーで日付をクリックしたら実行されます。selectedDateは変数でカレンダーで選択された日付が入ります。
18行目は、3行目のFromの入力欄に対して、選択できる最大の日付(maxDate)としてselectedDateをoptionで設定しています。

 

カレンダーに閉じるボタンを追加する

カレンダーに閉じるボタンを追加するサンプルです。

	$("#input1").datepicker({
		showButtonPanel: true
	});

2行目は、showButtonPanelでカレンダーに閉じるボタンを表示します。

以下は、サンプルです。

年月日:

 

複数のDatePickerに同じ設定を行う

2つのDatePickerに対してカレンダー表示時に今日からプラスマイナス1日のみ選択できるように設定します。

年月日:

年月日:

 

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<p>年月日: <input type="text" id="input5" /></p>
<p>年月日: <input type="text" id="input6" /></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script>
$(function() {
	$.datepicker.setDefaults({
		minDate: '-1d',
		maxDate: '+1d'
	});
	$( "#input5" ).datepicker({});
	$( "#input6" ).datepicker({});
});
</script>

3,4行目にテキスト入力欄が2つあります。
11行目は、setDefaultsでクリックできる日付の範囲を設定しています。(今日からプラスマイナス1日)
この設定は、15,16行目の両方に反映されます。

関連の記事

jQuery UI アコーディオンのサンプル(accordion)
jQuery モーダルでダイアログを開くサンプル
jQuery UI タブのサンプル(tabs)
jQuery UI ツールチップのサンプル(tooltip)
jQuery UI 要素の並び順を変えるサンプル(sortable)
jQuery UI オートコンプリートのサンプル(Autocomplete)
jQuery ドラッグ・アンド・ドロップする(draggable)

△上に戻る