SOFTELメモ

Softel Inc.

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

問題

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以降を推奨します。

関連するメモ

コメント(1)

Thay đổi tiêu đề, định dạng datepicker jQuery - Do Trinh's Blog 2017年1月7日 21:58

[…] Change title of JQuery DatePicker […]