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: '-'
	});
});

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

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

メソッド

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');
	});
});

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

【参考サイト】

• Datepicker | jQuery UI
• Datepicker Widget | jQuery UI API Documentation
• jQuery Datepickerの曜日に色を付ける | ENTEREAL/エンタリアル