Datepickerを日本語化／祝日対応／スマホ対応する

jQuery UIのDatepickerは、日付をカレンダー表示できるウィジェットです。
フォームで日付を入力するときに大活躍するのですが、いざ使ってみると「日本語化」「祝日表示」「スマホ対応」をどうすればよいか、悩むことになります。

そこで今回は、jQuery UI の DatePicker ウィジェットの実践的な使い方を解説します。

※本記事のサンプルコードでは、CDNのURLを指定していますが、実案件ではJSやCSSをダウンロードして使うようにしてください。

基本の使い方

まず、DatePickerに必要なライブラリ jQuery と jQuery UI のJSをscriptタグで読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/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タグは type="date" ではなく、type="text" で記述します。

<input type="text" id="datepicker" placeholder="日付を選択してください">

$.datepicker()関数で、DatePickerを使うinput要素を初期化します。

<script>
  $("#datepicker").datepicker();
</script>

ご覧のように、初期状態では日本語化や祝日対応がされていません。

See the Pen Datepicker Default by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

日本語化する

GitHubにDatePickerを日本向けにローカライズしたファイル datepicker-ja.js があるので、scriptタグで参照します。
scriptタグは、jquery-ui.jsの後に読み込みます。

<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>

なお、ローカライズファイル datepicker-ja.js は、公式サイト https://jqueryui.com/ からはダウンロードできないようなので、GitHubのjQuery UI公式レポジトリからダウンロードしてください。

これで日本語化されました。

See the Pen Datepicker 日本語化 by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

祝日対応する

jQuery UIには祝日機能がないので、祝日だけ色を変えるような場合は、DatePickerをカスタマイズする必要があります。

具体的には、DatePickerのbeforeShowDayオプションを使います。

beforeShowDayオプションについて

beforeShowDayオプションには、カレンダーのそれぞれの日付について呼び出されるフック関数を指定します。関数の仕様は以下の通り。

• 第1引数として該当日のDateオブジェクトが渡される
• 戻り値として配列を返す。
  • 配列の1要素目：その日が選択可能かどうかのフラグ。true もしくは false
  • 配列の2要素目：class属性に追加する値。
  • 配列の3要素目：その日を表すツールチップ。

DatePicker beforeShowDayオプション
https://api.jqueryui.com/datepicker/#option-beforeShowDay

日本の祝日データはHolidays JP APIから取得

日本の祝日は最近よく変動します。
自身で祝日データをメンテナンスするより、Googleカレンダーの「日本の祝日」のように、運用されているものを利用するのが得策です。

そこで、Googleカレンダーの祝日情報をAPIとして提供している Holidays JP API を利用します。
Holidays JP API では直近3年分の祝日データしか取得できませんが、一般的な案件では十分でしょう。

Holidays JP API
https://holidays-jp.github.io/

Holidays JP APIからJSON形式で祝日データを取得し、祝日データと曜日からbeforeShowDay関数の戻り値を決定するようにします。

以下のコードでは、class属性に、土曜日はday-saturday、日曜日はday-sunday、祝日はday-holiday、それ以外の平日はday-weekdayがつくようにしています。

$.get("https://holidays-jp.github.io/api/v1/date.json", function(holidaysData) {
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      if (date.getDay() == 0) {
        return [true, 'day-sunday', null];
      } else if (date.getDay() == 6) {
        return [true, 'day-saturday', null];
      }

      var holidays = Object.keys(holidaysData);
      for (var i = 0; i < holidays.length; i++) {
        var holiday = new Date(Date.parse(holidays[i]));
        if (holiday.getYear() == date.getYear() &&
            holiday.getMonth() == date.getMonth() &&
            holiday.getDate() == date.getDate()) {
            return [true, 'day-holiday', null];
        }
      }

      return [true, 'day-weekday', null];
    }
  });
});

.ui-datepicker-calendar .day-sunday > a,
.ui-datepicker-calendar .day-holiday > a {
  background: #ffc0c0;
}
.ui-datepicker-calendar .day-saturday > a {
  background: #c0d0ff;
}

上記コードではAPIに毎回接続することになるので、実案件ではJSONファイルをダウンロードしておき、1週間に1回定期的にファイルを更新するなど、運用で工夫した方がよさそうです。

See the Pen Datepicker 祝日対応 by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

スマホ対応する

スマホは1か月、PCは複数月表示する

PCブラウザやタブレットのように、画面が大きいデバイスの場合は、カレンダーを2か月表示させたほうが使いやすいかもしれません。
スマホでは1か月表示、PCでは2か月表示にするには、numberOfMonthオプションの値をデバイスごとに切り替えます。

JavaScriptでPC／スマホを切り替え方法はいろいろありますが、window.matchMedia関数を使い、デバイス幅が640pxを超えるかどうかで判別してみます。

var numberOfMonths;
if (window.matchMedia && window.matchMedia('(max-device-width: 640px)').matches) {
  // smartphone
  numberOfMonths = 1;
} else {
  // pc
  numberOfMonths = 2;
}

$("#datepicker").datepicker({
  numberOfMonths: numberOfMonths
});

ソフトウェアキーボードの表示を阻止する

スマホで入力フィールドをクリックすると、カレンダーだけではなく、ソフトウェアキーボードも一緒に表示されてしまいます。

inputタグにreadonly属性を付与すると、Androidではソフトウェアキーボードが表示されなくなります。

<input type="text" id="datepicker" readonly placeholder="日付を選択してください">

See the Pen Datepicker スマホ対応 by EGASHIRA, Shintaro (@symm_egashira) on CodePen.

まとめ

Datepickerを使うにあたって最低限必要なことをまとめました。

今回は説明できませんでしたが、実案件では選択可能な日付を制御する必要があることが多いので、その場合は minDateオプションやmaxDateオプションを指定したり、beforeShowDayオプションの戻り値で指定してください。