Posted on: 2011/08/10

jQuery UI Datepicker 日付選択

日付の入力フォームを作った場合、入力されるフォーマットは揃えておきたいものです。
じゃあ、入力フォームの隣に「※日付は『yyyy/mm/dd』形式で入力してください」と書いておこう、なんて、そんな原始的なことをしてはいけません。
ユーザビリティ的にも、ポップアップカレンダーなどの入力支援を設置するのが良いです。

日付の入力支援を実装する方法はいくつかありますが、時代はjQueryだ！ということで、今回は、jQuery UI のDatepickerの実装方法を紹介します。

・jQuery
・jQuery UI
・jQuery UI Datepicker

目次

デザインをカイスタマイズ

まず、ブラウザ上で、jQueryで実装できるUIのカスタマイズをまとめて行います。
→jQuery UI ThemeRoller
「Gallery」には、サンプルパターンもあります。

カスタマイズが終わったら、「ダウンロード」をクリックします。

↑目次に戻る

ダウンロード

「ダウンロード」をクリックすると、jQuery UI のダウンロードページに遷移します。
今回は、 Datepicker しか使わないので、「Core」と「Datepicker」にだけチェックを入れて、ダウンロードしましょう。

↑目次に戻る

フォルダ構成

ダウンロードしたzipファイルを解凍すると、以下のようなフォルダ構成になっています。



必要なスクリプトファイルは、以下の3つです。

js/jquery-1.6.2.min.js
js/jquery-ui-1.8.15.custom.min.js
development-bundle/ui/i18n/jquery.ui.datepicker-ja.js　- 日本語化ファイル

よって、jquery.ui.datepicker-ja.js を development フォルダから、js フォルダに移動して、development フォルダは削除してしまいましょう。
また、index.html は、ウェルカムページになっているので、ソースは空にしてしまいましょう。

で、実装するフォルダ構成はこうなります。



↑目次に戻る

実装

index.html に実装していきます。

ヘッダー

1
2
3
4
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.15.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-ja.js"></script>

スクリプト

1
2
3
$(function(){
    $('#datepicker').datepicker();
});

フォーム

1
<input id="datepicker" type="text" />

はい、実装できました。

もちろん、オプションも設定可能です。例えば、

1
2
3
4
5
6
7
8
$(function(){
    $('#datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy/mm/dd',
        yearRange: '2010:2030',
    });
});
  • changeYear　- プルダウンメニューによる年選択
  • changeMonth　- プルダウンメニューによる月選択
  • dateFormat – フォーマット
  • yearRange　- 年の選択範囲

で、こうなります。

すべてのオプション項目はこちら→UI/API/1.8/Datepicker

↑目次に戻る

LINE はてブ Pocket +1

Comments

  • jQuery UI Datepicker 日付選択 | Web memo より:
    2013年7月5日 11:18 AM

    […] http://hijiriworld.com/web/jquery-datepicker-%E6%97%A5%E4%BB%98%E9%81%B8%E6%8A%9E/ […]

    返信
  • dai ando より:
    2011年8月26日 9:14 AM

    現状で、datepickerからの日付取得が
    月/日/年
    となっているので、
    これを年/月/日と変えたいと思っていて、
    このサイトを見つけました。

    ご指摘の通りに、
    dateFormat: yyyy/mm/dd,の一文を加えたら、
    アプリケーションエラーとなりました。

    原因としては何が考えられますでしょうか？

    もう一点ですが、別途カレンダーアイコン（任意）を
    用意して、それを押下したときにdatepickerが表示され、
    そこで選択した日付をテキストエリアに表示させるためには
    どのような操作が必要でしょうか。

    教えてくださると助かります。
    アイコン押下→datepicker表示までは出来ています。

    よろしくお願いします。

    アドバイスいただきたく存じます。

    返信
    • hijiri より:
      2011年8月27日 5:35 PM

      > dai ando さん

      まず、dateFormat の件ですが、こちらの記載ミスです。申し訳ありません。クォーテーションが抜けておりました。また、年の書式も “yy” ですね…
      正しくは以下となります。記事も修正済みです。

      1
      dateFormat: 'yy/mm/dd',

      > もう一点ですが、別途カレンダーアイコン（任意）を
      > 用意して、それを押下したときにdatepickerが表示され、
      > そこで選択した日付をテキストエリアに表示させるためには
      > どのような操作が必要でしょうか。

      オプション項目として以下を追加することで、動的にトリガーボタンを生成することも出来ます。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      $(function(){
          $('#datepicker').datepicker({
              /* 省略 */
              showOn: 'button',
              buttonImageOnly: true,
              buttonText: '表示',
              buttonImage: '画像のパス',
          });
      });

      もしくは、自分でトリガーボタン（imgでも可）を設置して、click() のイベントを設定する方が、融通が利くかもしれません。

      1
      2
      <button id="trigger">表示</button>
      <input type="text" id="datepicker" />
      1
      2
      3
      4
      5
      6
      7
      8
      $(function(){
          $('#datepicker').datepicker({
              /* 省略 */
          });
          $('#trigger').click(function() {
              $('#datepicker').datepicker('show');
          });
      });

      ただ、この方法ですと、テキストエリアをクリックしてもカレンダーが起動してしまいます。
      ボタンのみから起動したいのであれば、もうひと手間かける必要がありそうです。
      例えば、元のテキストエリアを hidden にしておいて、カレンダーが選択された時に、別のテキストエリアにデータを出力させます。

      1
      2
      3
      4
      <input type="text" id="target" />
       
      <button id="trigger">表示</button>
      <input type="hidden" id="datepicker" />
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      $(function(){
          $('#datepicker').datepicker({
              /* 省略 */
              onSelect: function(date, instance) {
                  $('#target').val(date);
              }
          });
          $('#trigger').click(function() {
              $('#datepicker').datepicker('show');
          });
      });
      返信

jQuery UI Datepicker 日付選択 | Web memo へ返信するコメントをキャンセル