デートピッカーを利用するには、あらかじめ jquery 本体と、 jquery-ui.min.js を読込んでおく必要があります。
例えば、以下のような感じ。
|
1 2 |
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> |
実際に日本がする部分は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function(){ $.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)}); } |
あとは普通にデートピッカーを実行すれば OK です。
全体としては以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $(function(){ $.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)}); } $('セレクタ').datepicker(); </script> |