jQuery UI でカレンダーを表示する Datepicker の使い方！テキストボックスの日付入力が簡単になる？！

テキストボックスの日付入力をカレンダーから選択できるようにしたい！そんな要望を叶えてくれるのが JavaScript の拡張ライブラリ jQuery UI の Datepicker プラグインです。

jQuery UI を利用するには、前提として jQuery と jQuery UI のライブラリ、そしてデザインを定義した CSS のテーマファイルを読み込む必要があります。もしネットワーク環境にアクセスできるサイトであれば、CDN を利用して外部ファイルを直接読み込むことも可能です。

jQuery UI のファイル読込みを CDN のライブラリから参照する方法

jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の３ファ...

では具体的にどのような方法で実装するのか、サンプルプログラムと共に解説していきましょう。

jQuery UI でカレンダー表示による日付入力を実装

カレンダー表記を日本語対応する

jQuery UI は多言語に対応した作りになっています。しかしバージョン 1.11 から、ローカライズするためのファイルが必要になりました。つまり、日本語表記に変換するファイルを別途用意しなくてはいけません。

幸い Google の CDN 上には日本語変換用ファイルが提供されているので、こちらを読み込んで対応することが可能です。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

なお、ファイルの中身は次の通りです。20行程度なので、必ずしも別ファイルとして読み込む必要はなく、コピーして自身の JavaScript ファイルに貼り付けて利用しても構いません。

jQuery(function(t) {
  t.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: !1,
    showMonthAfterYear: !0,
    yearSuffix: "年"
  }, t.datepicker.setDefaults(t.datepicker.regional.ja)
});

カレンダー機能の実装サンプル

ここで紹介するサンプルは、テキストボックス選択時にカレンダーを表示して、選んだ日付がテキストボックスに表示される単純なプログラムになります。

html ファイルに必要なのは、id 属性を指定したテキストボックスのみです。カレンダー入力用に特別な定義はしていないので、既存のテキストボックスにも簡単にカレンダー機能を追加することができます。

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

JavaScript は、日本語対応のローカライズ定義も含めて記しておきます。

$(function() {
  // 指定したテキストボックスにカレンダー表示
  $("#input_date").datepicker();
 
  // 日本語化
  $.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']);
});

対象のテキストボックスに .datepicker() のメソッドを反映すれば完了です。6行目から24行目までは日本語対応用のソースなので、不要であれば削除してください。

それでは動作確認をしましょう。

カレンダー表示による日付入力のサンプル

単にカレンダーを表示するだけであれば実装は簡単です。もう少し手を加えれば、次のようなことも出来るようになります。

一部の内容は、予め Datepicker 内に拡張機能として実装されています。これらの機能は追って紹介していきます。

以上、カレンダーを表示して日付情報を入力できる jQuery UI Datepicker の利用方法でした。