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

2015/10/01

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

これまで紹介した内容

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

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

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

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

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

オプション内容
buttonImageカレンダーアイコンの画像 URL を定義します。画像ファイルは各自ご用意ください。相対パスで定義することも可能です。
buttonTextカレンダーアイコンにマウスがあたった時に表示するツールチップの文言を定義します。設定しなくても困ることはないので、除外しても構いません。
buttonImageOnly

単に画像として表示するか、ボタンとして表示し、ボタン内に画像を表示させるかを定義します。

true: 画像のみ表示
false: ボタン上に画像を表示(初期値)

showOn

カレンダーを表示するイベントを制御するための定義です。button または both を設定しないと、カレンダーアイコンが表示されません。

focus: テキストボックス選択時のみカレンダーを表示(初期値)
button: アイコンクリック時のみカレンダーを表示
both: 上記どちらのパターンでもカレンダー表示

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

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

アイコンからカレンダー呼び出し【HTML】
<input type="text" id="xxdate" />

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

アイコンからカレンダー呼び出し【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行目)は不要であれば削除してください。

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

アイコンからカレンダー呼び出し【CSS】
img.ui-datepicker-trigger{
  cursor: pointer;
  margin-left: 7px!important;
  vertical-align: middle;
}

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

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

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

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

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

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

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

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

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします