日付カレンダー入力 jqueryui.datepickerの日本語対応

Tweet

Category JavaScript 2010/11/29

問題

jQuery.ui のdatepicker（カレンダー式 日付入力UI）を日本語に対応したものにしたい！

答え

demo

datepickerの国際化対応は本家の説明にもあります。

http://jqueryui.com/demos/datepicker/

必要なところだけ取り出して使用すると、こんな感じ。

$(function() {
	var op = {
			closeText: '閉じる',
			prevText: '<前',
			nextText: '次>',
			currentText: '今日',
			monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
			monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
			dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
			dayNamesShort: ['日','月','火','水','木','金','土'],
			dayNamesMin: ['日','月','火','水','木','金','土'],
			weekHeader: '週',
			dateFormat: 'yy/mm/dd',
			firstDay: 0,
			isRTL: false,
			showMonthAfterYear: true,
			yearSuffix: '年'};
	$(".datepicker").datepicker(op);

	//ついでに、input要素の大きさを指定したり、autocompleteをOFFにしたり気を使ってみる
	$(".datepicker").attr({
		size: "16",
		autocomplete: "off"
	});
});

注意

jqueryuiのバージョン1.7では、yearSuffix: ‘年’ が効かないらしいです。1.8以降を推奨します。