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

更新日: 公開日:2015/09/10
jQueryでカレンダーを実装

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

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

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

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

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

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

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

Datepicker 日本語対応ローカライズファイル
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

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

Datepicker 日本語対応【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 属性を指定したテキストボックスのみです。カレンダー入力用に特別な定義はしていないので、既存のテキストボックスにも簡単にカレンダー機能を追加することができます。

jQuery UI カレンダー入力【HTML】
<input type="text" id="input_date" />

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

jQuery UI カレンダー入力【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行目までは日本語対応用のソースなので、不要であれば削除してください。

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

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

日付:

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

  • 1ヶ月分ではなく複数月のカレンダーを表示する
  • 土曜・日曜の背景色を変更する
  • 月曜はじまりに変更する
  • 年月をプルダウンから選択できるようにする
  • テキストボックスの横にカレンダーアイコンを表示する

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

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

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。