jQuery UI Datepicker の便利機能を一気にまとめて定義！使いやすいカレンダーはこれだ！

jQuery UI のカレンダーによる日付入力補助機能を実現する Datepicker プラグインは、初期状態のままでは利便性が低いため、オプション設定により使い勝手を良くする方法をこれまで紹介してきました。

各日付入力項目の用途にあわせて、必要な機能を実装するのが最も望ましいですが、最初から何でも出来るように提示してしまうのも手段の１つです。そこでこれまで紹介した機能を一通り取り入れて、汎用的に使える利便性の高いオプション定義を、事前に一括定義する方法について今回は紹介していきます。

カレンダー入力が便利になる汎用的な Datepicker のオプション設定

一般的 jQuery UI のプラグインが保持しているオプション設定は、それぞれ初期値が定義されています。通常は、プラグイン呼び出し時にオプション値を渡して反映させます。

しかし複数の画面に渡って何度も利用される場合、都度オプション項目を設定していてはソースコードが煩雑になってしまいます。そこでオプションの初期値を、JavaScript 側で利用頻度の高い設定に予め変更しておくことで、何度も同じオプション設定をしなくて済むようになります。

こちらはソースコードを見たほうが分かりやすいと思うので、以下のサンプルをご覧になってください。

Datepicker のオプション項目の一括定義

期間１ <input type="text" id="xxdate0" /> ～ <input type="text" id="xxdate1" /><br />
期間２ <input type="text" id="xxdate2" /> ～ <input type="text" id="xxdate3" /><br />
期間３ <input type="text" id="xxdate4" /> ～ <input type="text" id="xxdate5" /><br />
期間４ <input type="text" id="xxdate6" /> ～ <input type="text" id="xxdate7" /><br />
期間５ <input type="text" id="xxdate8" /> ～ <input type="text" id="xxdate9" />

今回はこちらの HTML を利用します。

そしてオプションの初期値を設定する JavaScript です。ポイントは .setDefaults() の利用です。この設定により、Datepicker で使われるオプションの初期値が設定できます。

$(function() {

  // Datepicker オプションの初期値定義を変更
  $.datepicker.setDefaults({

    // 日本語へローカライズ
    // Cf. https://webllica.com/jquery-ui-datepicker/
    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: '年',

    // 複数月のカレンダー表示
    // Cf. https://webllica.com/jquery-ui-datepicker-multiple-months/
    numberOfMonths: 3,     // 3ヶ月分表示
    showCurrentAtPos: 0,   // 現在の月の表示位置は一番
    stepMonths: 3,         // 月の移動を3ヶ月単位とする
    showButtonPanel: true, // ボタンパネルを表示
    gotoCurrent: true,     // ボタンパネルに当日日付のボタン表示

    // カレンダーを月曜始まりにする
    // Cf. https://webllica.com/jquery-ui-datepicker-starting-on-mondays/
    firstDay: 1,    // 月曜始まり

    // 年月をプルダウン選択にする
    // Cf. https://webllica.com/jquery-ui-datepicker-select-pulldown/
    changeYear: true,  // 年選択をプルダウン化
    changeMonth: true, // 月選択をプルダウン化

    // カレンダーアイコンを用意する
    // Cf. https://webllica.com/jquery-ui-datepicker-by-calendar-icon/
    buttonImage: "(画像URL)",        // カレンダーアイコン画像
    buttonText: "カレンダーから選択", // ツールチップ表示文言
    buttonImageOnly: true,           // 画像として表示
    showOn: "both"                   // カレンダー呼び出し元の定義
  });

  // テキストボックスへ Datepicker を仕掛ける
  $("#xxdate0").datepicker();
  $("#xxdate1").datepicker();
  $("#xxdate2").datepicker();
  $("#xxdate3").datepicker();
  $("#xxdate4").datepicker();
  $("#xxdate5").datepicker();
  $("#xxdate6").datepicker();
  $("#xxdate7").datepicker();
  $("#xxdate8").datepicker();
  $("#xxdate9").datepicker();

});

複数月表示と年月のプルダウン化を組み合わせた場合、現在の月の位置を動かすとおかしな動きになるため、showCurrentAtPos のオプション値を 0　にしています。

あとは土日の背景色を変えるための CSS 定義と、微調整用のスタイルを反映させます。なおサイズ調整は必ずしも必要ではないので、環境に合わせて適宜修正するようにしてください。

/* --------------------
  月曜始まりの土日カラー設定
  Cf. https://webllica.com/jquery-ui-datepicker-change-weekend-color/
-------------------- */
/* 日曜日のカラー設定 */
td.ui-datepicker-week-end:last-child a.ui-state-default{
  background-color: #ffecec;   /* 背景色を設定 */
  color: #f00!important;       /* 文字色を設定 */
}
/* 土曜日のカラー設定 */
td.ui-datepicker-week-end a.ui-state-default{
  background-color: #eaeaff;   /* 背景色を設定 */
  color: #00f!important;       /* 文字色を設定 */
}
/* ホバー時の動作 */
td.ui-datepicker-week-end a.ui-state-hover{
  opacity: 0.8;
}
/* 当日を示す色はそのまま */
td.ui-datepicker-week-end a.ui-state-highlight{
  background-color: #fffa90!important;
}

/* --------------------
  年月をプルダウン化した場合の余白調整
  Cf. https://webllica.com/jquery-ui-datepicker-select-pulldown/
-------------------- */
/* 年プルダウンの変更 */
select.ui-datepicker-year{
  height: 1.7em!important;      /* 高さ調整 */
  margin-right:5px!important; /* 「年」との余白設定 */
  width:70px!important;       /* 幅調整 */
}
/* 月プルダウンの変更 */
select.ui-datepicker-month{
  height: 1.7em!important;      /* 高さ調整 */
  margin-left:5px!important;  /* 「年」との余白設定 */
  width:70px!important;       /* 幅調整 */
}

img.ui-datepicker-trigger{
  cursor: pointer;
  margin-left: 7px!important;
  vertical-align: middle;
}

/* --------------------
  カレンダーアイコン表示による微調整
  Cf. https://webllica.com/jquery-ui-datepicker-by-calendar-icon/
-------------------- */
img.ui-datepicker-trigger{
  cursor: pointer;
  margin-left: 7px!important;
  vertical-align: middle;
}

Datepicker のオプション項目の一括定義サンプル

かなりボリュームのあるカレンダーに仕上がりました。一通り取り込んでみると、逆に使いづらさが見えてくる部分もあるかもしれません。あとは入力項目の目的に応じて、適材適所のオプションを設定していきましょう。

以上、jQuery UI の Datepicker プラグインにおける便利機能を一気にまとめて一括定義する方法でした。