アイコンをクリックして 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
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!