jQuery UIのDatepickerは、日付をカレンダー表示できるウィジェットです。
フォームなんかで、年月日入力する事が結構多いですよね。
その時に重宝するのですが、そのままだと全て英語表示になるので以外と不便。
そこで日本語に対応するウィジェットの使用方法をメモします。
基本的な設定
まず、DatePickerに必要なライブラリjQueryとjQuery UIのJSを読み込みます。
<script src="jquery-3.4.1.min.js"></script> <script src="jquery-ui.min.js"></script>
jQuery UIにはテーマがあります。linkタグでテーマのCSSを読み込みます。
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
inputタグはを以下のように記述します。
<input type="text" id="datepicker" placeholder="日付を選択してください">
$.datepicker()関数を記述します。
<script>
$("#datepicker").datepicker();
</script>
これで機能します。
日本語に対応する
基本設定だけでは、全て英語表記になります。なのでGitHubにDatePickerを日本向けにローカライズしたファイルdatepicker-ja.jsをダウンロードして、読み込みます。
scriptタグはjquery-ui.jsの後に読み込みます。
<script src="datepicker-ja.js"></script>
これで日本語に変換されます。
祝日に対応する
jQuery UIには祝日機能がないので、祝日だけ色を変えるような場合は、DatePickerのカスタマイズが必要です。
DatePickerのbeforeShowDayオプションを使います。
beforeShowDayオプション
beforeShowDayオプションには、カレンダーのそれぞれの日付について呼び出されるフック関数を指定します。
詳しくは以下をご参照ください。
Holidays JP APIから日本の祝日データを取得
厄介な事に、日本の祝日は最近よく変動します。東京オリンピックの例が良い例ですね。
自分でメンテナンスするのは面倒なのでAPIを利用しましょう。
Googleカレンダーの祝日情報をAPIとして提供しているHolidays JP APIが使えます。
Holidays JP APIでは直近3年分の祝日データしか取得できませんが、通常案件では十分でしょう。
Holidays JP API
JSON形式で祝日データを取得し、祝日データと曜日からbeforeShowDay関数の戻り値を決定するようにします。
class属性に、土曜日はsaturday、日曜日はsunday、祝日はholiday、それ以外の平日はweekdayを設定します。
js
$.get("https://holidays-jp.github.io/api/v1/date.json", function (holidaysData) {
$("#datepicker").datepicker({
beforeShowDay: function (date) {
if (date.getDay() == 0) {
return [true, 'sunday', null];
} else if (date.getDay() == 6) {
return [true, 'saturday', null];
}
var holidays = Object.keys(holidaysData);
for (var i = 0; i < holidays.length; i++) {if (window.CP.shouldStopExecution(0)) break;
var holiday = new Date(Date.parse(holidays[i]));
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [true, 'holiday', null];
}
}window.CP.exitedLoop(0);
return [true, 'weekday', null];
} });
});
css
.ui-datepicker-calendar .sunday > a,
.ui-datepicker-calendar .holiday > a {
background: #ffc0c0;
}
.ui-datepicker-calendar .saturday > a {
background: #c0d0ff;
}
案件に応じて、JSONをダウンロードして利用しましょう。
その場合1週間おきに定期的にアップデートが必要です。
選択できる範囲を設定する
たまになんですが、予約申込などの時に、選択できる月を制限したいというリクエストがあります。
その場合の設定方法が以下になります。
$( '#datepicker' ) . datepicker( {
minDate: '+1m',//1ヶ月先から選択
maxDate: '+2m+2w'//2ヶ月2週間先まで選択
});
minDateではじまりの月を設定し、maxDateで上限の月を設定します。
maxDateは+2m+2wと記述し1ヶ月と2週間を上限として設定しています。
ここに+2dを加えれば2日足されます。
その他、カレンダーを2ヶ月表示したりスマホ対応などあるので、また後日アップデートしたいと思います。
