【jQuery】デートピッカーの日本語化
デートピッカーを利用するには、あらかじめ jquery 本体と、 jquery-ui.min.js を読込んでおく必要があります。
例えば、以下のような感じ。
[html]
<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>
[/html]
実際に日本化する部分は以下の通りです。
[javascript]
$(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)});
}
[/javascript]
あとは普通にデートピッカーを実行すれば OK です。
全体としては以下のようになります。
[html]
<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>
[/html]
