ダウンロード
ダウンロードが英語サイトの上、結構ややこしく、どこのサイトを見てもなかなかピンとくるものがなく苦労した。下記サイトが一番わかりやすいと思います。
画像のように「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: "<前",
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.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: "<前",
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: "年",
showButtonPanel: true // "今日"ボタン, "閉じる"ボタンを表示する
};
datepicker.setDefaults( datepicker.regional.ja );
return datepicker.regional.ja;
} ) );
33行目の「”今日”ボタン, “閉じる”ボタンを表示する」のオプションを追加。
↓完成図
