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