アイコンをクリックして jQuery UI の Datepicker のカレンダーを呼び出す方法

jQuery UI の Datepicker には、様々なオプション項目が用意されています。上手く利用することで、カレンダー入力の利便性を向上させることができます。

今回紹介する内容は、日付入力項目に設定される機会の多いカレンダーアイコンの利用方法です。

カレンダーアイコンから Datepicker のカレンダーを呼び出す

Datepicker プラグインは、テキストボックスにフォーカスが当たった時点でカレンダーが表示されます。そのため、入力項目を選択するまでカレンダー入力できることがユーザー側に伝わりません。もしカレンダーのアイコンが表示されていれば、カレンダーから日付入力できることが一目瞭然になります。

では、カレンダーアイコンを表示させるために、Datepicker プラグインで用意されているオプション項目を確認しておきましょう。

カレンダーアイコン表示用のオプション設定

オプション項目は Datepicker 呼び出し時の引数として設定します。 {} カッコでくくり「オプション名 : 設定値」のフォーマットで書きます。複数オプションを設定する場合は、カンマ区切りで指定します。

では、カレンダーアイコンを表示させるサンプルプログラムをご覧ください。

<input type="text" id="xxdate" />

分かりやすく HTML はテキストボックスのみを用意します。JavaScript では前述のオプション項目を定義します。

$(function() {
  // テキストボックスへ Datepicker を仕掛ける
  $("#xxdate").datepicker({
    buttonImage: "(画像URL)",        // カレンダーアイコン画像
    buttonText: "カレンダーから選択", // ツールチップ表示文言
    buttonImageOnly: true,           // 画像として表示
    showOn: "both"                   // カレンダー呼び出し元の定義
  });

  // 日本語化
  $.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']);
});

日本語化のソース（10～29行目）は不要であれば削除してください。

カレンダーとテキストボックスの位置を調整するために、スタイルシートを追記します。ここで設定している値は、テキストボックスのサイズに応じて最適なものに書き換えてください。

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

アイコンクリックによるカレンダー呼び出しサンプル

カレンダーアイコンがあるだけで、直感的にカレンダー入力できる項目であると分かります。簡単に組み込める機能なので、ぜひ取り入れてみてください。

テキストボックスは readonly でも動作する

日付のフォーマットチェックは手間が掛かるため、テキストの直接入力を NG にしたい場合もあるでしょう。そんな時はテキストボックスに readonly 属性を設定すれば大丈夫です。

今回紹介したカレンダーアイコンからの呼び出しは、テキストボックスが readonly であってもきちんと動作します。プログラムソースは割愛しますが、こちらも動作確認用画面を用意しました。

テキストボックス readonly 時の挙動確認サンプル

問題なく日付が設定できますね。ただ、ユーザーによっては手入力したい要件もあるため、必ずしも readonly が万能ではないことを覚えておいてください。

以上、カレンダーアイコンを利用して jQuery UI の Datepicker のカレンダーを呼び出す方法でした。