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/

サンプル

Datepicker Widgetのサンプルです。
入力欄をクリックするとカレンダーが表示され、日付をクリックすると選択した日付が入力されます。

年月日:

コード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのdatepickerのサンプル</title>
<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>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
</style>
<script>
	$(function() {
		$.datepicker.setDefaults($.datepicker.regional["ja"]);
		$("#test1").datepicker();
	});
</script>
</head>
<body >

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

</body>
</html>

表示する月を増やす

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

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

サンプルです。

年月日:

ひと月分の表示の中に他の月を表示し、他の月を選択可能にする

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

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

サンプルです。

年月日:

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

カレンダーの年と月をプルダウン表示して選択できるようにする場合、上記サンプルコードの15行目を以下のようにします。

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

サンプルです。

年月日:

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

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

	$( "#test1" ).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)

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る