サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jQuery UIのDatepickerを使ってみる

jQuery UIのDatepickerを使ってみる

jQuery UIのDatepickerを使って、カレンダーから日付の入力を試してみます。

サンプルコード

必要なファイルを読み込みます。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

今回はthemeを「smoothness」にしていますが、違うthemeを使いたい場合はCSSのディレクトリを適宜変更してください。

HTML

inputにフォーカスが当たった時に、カレンダーを表示させます。

<input type="text" id="datepicker" />

JavaScript

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

カレンダーから日付を入力するデモページ
 

上記ではinputにフォーカスが当たった時にカレンダーを表示させましたが、divなどの要素に対して設定することで最初から表示させることもできます。

HTML

<div id="datepicker"></div>

JavaScript

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

カレンダーから日付を入力するデモページ2
 

カレンダーを日本語で表示したい場合、こちらのページからdatepicker-ja.jsをダウンロードして読み込ませることで対応できます。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="./datepicker-ja.js"></script>

カレンダーを日本語で表示するデモページ
 

オプション

オプション・メソッドの詳細は公式ドキュメントでご確認ください、

HTML

<input type="text" id="datepicker1" />

<div id="datepicker2"></div>
<input type="text" id="output" />

JavaScript

$(function() {
	$('#datepicker1').datepicker({
		appendText: '(yy-mm-dd-DD)',
		autoSize: true,
		beforeShow: function(ele, obj) {
			console.log(ele);
			console.log(obj);
		},
		beforeShowDay: function(date) {
			switch(date.getDay()) {
				case 0:
					return [true, 'sunday', '日曜日'];
					break;
				case 6:
					return [true, 'saturday', '土曜日'];
					break;
				default:
					return [true, 'weekday', '平日'];
					break;
			}
		},
		showOn: 'both',
		buttonImage: 'open.png',
		buttonImageOnly: true,
		showButtonPanel: true,
		closeText: 'とじる',
		currentText: 'せんたく日',
		gotoCurrent : true,
		dateFormat : 'yy-mm-dd-DD',
		constrainInput: false,
		dayNames: ['にちようび', 'げつようび', 'かようび', 'すいようび', 'もくようび', 'きんようび', 'どようび'],
		defaultDate: '+1m +7d',
		duration: 1000,
		monthNames: ['睦月', '如月', '弥生', '卯月', '皐月', '水無月', '文月', '葉月', '神無月', '神無月', '霜月', '師走'],
		navigationAsDateFormat: true,
		numberOfMonths: [2, 3],
		onClose: function(date, obj) {
			console.log(date);
			console.log(obj);
		},
		showAnim: 'slideDown',
		showMonthAfterYear: false,
		changeYear: true,
		yearRange: 'c-2:c+2'
	});

	$('#datepicker2').datepicker({
		altField: '#output',
		altFormat: 'y-m-d-D',
		changeMonth: true,
		changeYear: true,
		dayNamesMin: ['にち', 'げつ', 'か', 'すい', 'もく', 'きん', 'ど'],
		dayNamesShort: ['にちよう', 'げつよう', 'かよう', 'すいよう', 'もくよう', 'きんよう', 'どよう'],
		defaultDate: new Date('2015/8/31'),
		firstDay: 1,
		minDate: new Date('2015/3/15'),
		maxDate: new Date('2015/9/15'),
		hideIfNoPrevNext: true,
		isRTL: true,
		numberOfMonths : 3,
		monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
		showButtonPanel: true,
		nextText: 'つぎ',
		prevText: 'まえ',
		onChangeMonthYear: function(year, month, obj) {
			console.log(year);
			console.log(month);
			console.log(obj);
		},
		onSelect: function(date, obj) {
			console.log(date);
			console.log(obj);
		},
		showOtherMonths: true,
		selectOtherMonths: true,
		showCurrentAtPos: 1,
		showWeek: true,
		stepMonths: 2,
		weekHeader: 'しゅう',
		yearSuffix: '-'
	});
});

オプション設定のデモページ

altField 指定したinput要素に、カレンダーで選択している日付を反映する。
初期値は””。
altFormat altFieldで反映するフォーマットを指定。
初期値は””。
appendText 入力エリアの後ろに表示するテキストを指定。
主に入力形式を表示するのに使用。
初期値は””。
autoSize 入力エリアのサイズを自動設定するかどうかを指定。
初期値はfalse。
beforeShow 入力エリアにフォーカスが当たってカレンダーが表示される直前に、入力フィールドとカレンダーのインスタンスを取得する。
初期値はnull。
beforeShowDay 入力エリアにフォーカスが当たってカレンダーが表示される直前に、表示される月の全ての日を取得する。
取得は日数分繰り返され、毎回配列を返す必要がある。
[0]にはその日を選択可能にするかどうかをtrue/falseで指定
[1]にはカレンダーに追加するclassの指定
[2]にはオンマウス時に表示するツールチップのテキストを指定
初期値はnull。
buttonImage showOnがbuttonかbothのとき、ボタン内に表示する画像を指定。
初期値は””。
buttonImageOnly buttonImageで指定した画像のみ表示するかどうかを指定。
初期値はfalse。
buttonText カレンダー表示ボタンのテキストを指定。
初期値は”…”。
calculateWeek 年間の週を計算する方法を指定?
初期値はjQuery.datepicker.iso8601Week。
changeMonth 月をカレンダー内のselectで選択できるようにするかどうか。
初期値はfalse。
changeYear 年をカレンダー内のselectで選択できるようにするかどうか。
初期値はfalse。
closeText showButtonPanelがtrueのときの閉じるボタンのテキストを指定。
初期値は”Done”。
constrainInput dateFormatで設定した形式のみに入力を制限するかどうかを指定。
初期値はtrue。
currentText showButtonPanelがtrueのときの今日に戻るボタンのテキストを指定。
初期値は”Today”。
dateFormat 日付の形式を指定。
設定の詳細はこちらを参照。
初期値は”mm/dd/yy”。
dayNames 曜日(DD)の表示を指定。
初期値は[ “Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday” ]。
dayNamesMin カレンダー内の曜日の表示を指定。
初期値は[ “Su”, “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa” ]。
dayNamesShort 曜日(D)の表示を指定。
初期値は[ “Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat” ]。
defaultDate アクセス時に表示される日付の指定。
指定方法はnew Date(‘2015/8/31’)のようにして直接指定する方法、-7のようにして今日から何日前(後)かを指定する方法、”+1m +7d”のようにして、今日から年月日それぞれどれだけ移動するか指定する方法がある。
初期値はnull。
duration カレンダーの表示速度を指定。
指定方法は”slow”, “normal”, “fast”で指定するか、数値で指定。
初期値は”normal”。
firstDay 週の最初の曜日を指定する。
初期値は0。
gotoCurrent trueのとき、今日に戻るボタンのとび先が現在選択している日に変わる。
初期値はfalse。
hideIfNoPrevNext maxDateまたはminDateを指定しているときに、最大(最小)より先の前後移動を制限するかどうか。
初期値はfalse。
isRTL 現在の言語が右から左に描画されるかどうかを指定。
初期値はfalse。
maxDate 選択できる最大の日付を指定。
指定方法はnew Date(‘2015/8/31’)のようにして直接指定する方法、-7のようにして今日から何日前(後)かを指定する方法、”+1m +7d”のようにして、今日から年月日それぞれどれだけ移動するか指定する方法がある。
初期値はnull。
minDate 選択できる最小の日付を指定。
指定方法はnew Date(‘2015/8/31’)のようにして直接指定する方法、-7のようにして今日から何日前(後)かを指定する方法、”+1m +7d”のようにして、今日から年月日それぞれどれだけ移動するか指定する方法がある。
初期値はnull。
monthNames 月(mm)のカレンダー上の表示を指定。
初期値は[ “January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December” ]。
monthNamesShort 月(m)のカレンダー上の表示を指定。
初期値は[ “Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec” ]。
navigationAsDateFormat formatDateに合わせてcurrentText,prevText,nextTextの表示を変更するかどうか指定?
初期値はfalse。
nextText カレンダーの次矢印にオンマウスした時のツールチップのテキストを指定。
初期値は”Next”。
numberOfMonths カレンダーに一度に表示する月の数を指定。
表示する数を数値で指定するか、[行数, 列数]のように配列で指定。
初期値は1。
onChangeMonthYear 月を変更したときに、変更後の年・月・カレンダーのインスタンスを返す。
初期値はnull。
onClose カレンダーを閉じたときに、選択されている日付とカレンダーのインスタンスを返す。
初期値はnull。
onSelect 日付を選択されたときに、選択された日付とカレンダーのインスタンスを返す。
初期値はnull。
prevText カレンダーの前矢印にオンマウスした時のツールチップのテキストを指定。
初期値は”Prev”。
selectOtherMonths showOtherMonthsがtrueのとき、その月以外の日を選択できるかどうか指定。
初期値は”false”。
shortYearCutoff dateFormatの年がyのとき、世紀の切り替えをどこで行うかを指定する。
指定方法は0~99を直接指定するか、”+3″や”-5″など現在の年から相対で指定。
初期値は”+10″。
showAnim カレンダーを表示するアニメーションを指定。
指定方法は、”show”,”slideDown”,”fadeIn”やjQuery UI effectsのいずれか。
初期値は”show”。
showButtonPanel カレンダー下部に今日に戻るボタンと閉じるボタンを追加するかどうか指定。
初期値はfalse。
showCurrentAtPos numberOfMonthsが設定されているときに、現在の月を表示する位置を指定。
初期値は0。
showMonthAfterYear カレンダー内の月を年の後ろに表示するかどうか指定。
falseの場合は年の前に表示される。
初期値はfalse。
showOn カレンダーが開く方法の指定。
“focus”がinputにフォーカスが当たったとき、”button”がボタンをクリックしたとき、”both”が両方。
初期値は”focus”。
showOptions showAnimでjQuery UI effectsのいずれかを使用したとき、showOptionsで追加のプロパティを設定できる?
初期値は{}。
showOtherMonths その月以外の日をカレンダーに表示するかどうか指定。
選択できるかどうかの指定はselectOtherMonthsを使用。
初期値はfalse。
showWeek カレンダー内にその週が年間で何番目の週かを表示するかどうか。
初期値はfalse。
stepMonths 前後ボタンでどのくらい移動するかを指定。
初期値は1。
weekHeader showWeekで表示しているテキストを指定。
初期値は”Wk”。
yearRange 年のselectで表示する範囲を指定。
指定するときは、最小と最大の間を:で挟んで指定します。
指定方法はcを選択されている都市として”c-nn:c+nn”のようにするか、現在の年を基準として”-nn:+nn”とするか、”2002:2012″のように直接指定する。
初期値は”c-10:c+10″。
yearSuffix カレンダー上部の年の後に表示するテキストを指定。
初期値は””。

初期値は日本語化していない状態のものになります。
 

メソッド

HTML

<button id="destroy">destroy</button>
<button id="dialog">dialog</button>
<button id="isDisabled">isDisabled</button>
<button id="optionget">optionget(disabled)</button>
<button id="optionallget">optionallget</button>
<button id="optionset">optionset(disabled)</button>
<button id="optionsets">optionsets(firstDay,changeMonth)</button>
<button id="show">show(2秒後にhide)</button>
<button id="widget">widget</button><br />
<input type="text" id="datepicker1" /><br />

<button id="getDate">getDate</button>
<button id="setDate">setDate</button>
<div id="datepicker2"></div>
<input type="text" id="output" />

JavaScript

$(function() {
	$('#datepicker1').datepicker();
	$('#datepicker2').datepicker({
		altField: '#output'
	});

	$('#destroy').on('click', function() {
		$('#datepicker1').datepicker('destroy');
	});
	$('#dialog').on('click', function() {
		$('#datepicker1').datepicker('dialog', '2015/12/24');
	});
	$('#isDisabled').on('click', function() {
		console.log($('#datepicker1').datepicker('isDisabled'));
	});
	$('#optionget').on('click', function() {
		console.log($('#datepicker1').datepicker('option', 'disabled'));
	});
	$('#optionallget').on('click', function() {
		console.log($('#datepicker1').datepicker('option'));
	});
	$('#optionset').on('click', function() {
		$('#datepicker1').datepicker('option', 'disabled', true);
	});
	$('#optionsets').on('click', function() {
		$('#datepicker1').datepicker('option', {
			firstDay: 1,
			changeMonth: true
		});
	});
	$('#show').on('click', function() {
		$('#datepicker1').datepicker('show');
		setTimeout(function() {
			$('#datepicker1').datepicker('hide');
		}, 2000);
	});
	$('#widget').on('click', function() {
		console.log($('#datepicker1').datepicker('widget'));
	});
	$('#getDate').on('click', function() {
		console.log($('#datepicker2').datepicker('getDate'));
	});
	$('#setDate').on('click', function() {
		$('#datepicker2').datepicker('setDate', '2016/1/1');
	});
});

メソッド設定のデモページ

destroy() Datepickerの機能を削除。
dialog(date [, onSelect, options, pos]) ダイアログでカレンダーを表示。
getDate() 現在選択されている日付の取得。
hide() カレンダーを閉じる。
isDisabled() カレンダーが無効になっているかどうかを確認。
option(optionName) optionNameの値を取得。
option() 現在設定しているoptionの値を取得。
option(optionName, value) optionNameにvalueを設定。
option(options) optionを複数設定。
refresh() カレンダーを再描画する?
setDate(date) 日付を設定する。
show() カレンダーを表示する。
widget() カレンダーを含めたjQueryオブジェクトを返す。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP