jQuery UI datepickerのダウンロード、設置、日本語化

ダウンロード

ダウンロードが英語サイトの上、結構ややこしく、どこのサイトを見てもなかなかピンとくるものがなく苦労した。下記サイトが一番わかりやすいと思います。

https://jqueryui.com/

画像のように「Stable」をクリックすると設置に必要なファイル群一式がダウンロードできます。

設置

CSS

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.structure.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.theme.css" rel="stylesheet" type="text/css">

Javascript

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script>
$(function(){
  $(".datepicker").datepicker();
});
</script>

最初の「.datepicker」がHTMLのクラスを指定しているので、HTML側で「class=”datepicker”」を指定。

HTML


<form action="" method="get">
<input type="text" class="datepicker" name="希望日" value="" placeholder="クリックして日付を入力"></input>
</form>

先程のJavascriptで設定された「class=”datepicker”」を指定。

↓ひとまずカレンダー表示

日本語化

ちょっとだけややこしいけど、これが一番確実な方法。

https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ja.js

上記サイトにアクセスして、右側にある「Raw」ボタンをクリックするとテキストが表示されるので、全て選択して「datepicker-ja.js」として保存する。

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO (kentaro@ranvis.com). */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ja = {
	closeText: "閉じる",
	prevText: "&#x3C;前",
	nextText: "次&#x3E;",
	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.setDefaults( datepicker.regional.ja );

return datepicker.regional.ja;

} ) );

上記からもダブルクリックで全て選択、コピペ可能。

保存したファイルをHTMLへ設置

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

↓ここに追記
<script type="text/javascript" src="js/datepicker-ja.js"></script>

<script>
$(function(){
  $(".datepicker").datepicker();
});
</script>

↓日本語化後

もうちょっとカスタマイズ

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO (kentaro@ranvis.com). */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ja = {
	closeText: "閉じる",
	prevText: "&#x3C;前",
	nextText: "次&#x3E;",
	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: "年",
	showButtonPanel: true // "今日"ボタン, "閉じる"ボタンを表示する
 };
datepicker.setDefaults( datepicker.regional.ja );

return datepicker.regional.ja;

} ) );

33行目の「”今日”ボタン, “閉じる”ボタンを表示する」のオプションを追加。

↓完成図

コメントを残す

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

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)