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

jQuery UIのカレンダーから日付を入力するサンプルです。
Datepicker Widgetを使用します。

目次

Datepicker Widget

  • jQuery UIのライブラリです。
  • 入力欄をクリックするとカレンダーが表示され、カレンダーの日付をクリックすると入力欄に日付が入力されます。
  • jquery.min.jsに加えて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/1.12.4/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>

10行目は、日本語の設定にしています。jaをenに変更すると月や曜日の表示が英語になります。9月の表記がSeptemberに曜日がSu(Sunday)などです。7行目の「jquery.ui.datepicker-ja.min.js」の追加も必要です。

表示する月を増やす

カレンダーに表示する月の数を3つにする場合、上記コードを以下のようにします。

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

サンプルです。

年月日:

ひと月分を表示中に他の月の日にちも選択できるようにする

カレンダーのひと月分を表示中に他の月の日にちも選択できるようにする場合、上記コードを以下のようにします。(前の月の30,31日や次の月の1,2日等も選択できます)

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

サンプルです。

年月日:

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

カレンダーの年と月をプルダウン表示して選択できるようにする場合、上記コードを以下のようにします。(選択箇所はカレンダー上部にあります)

	$( "#input1" ).datepicker({
		changeYear: true, //年を表示
		changeMonth: true //月を選択
	});

サンプルです。

年月日:

カレンダーで開いたときの初期日付を設定する

カレンダーで開いたときの初期日付を設定する場合、上記コードを以下のようにします。引数の月を指定するときは実際の月より-1します。例の2017,4,5は、実際は2017/5/5になります。

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

サンプルです。

年月日:

関連の記事

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

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る