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.jsdevelopment フォルダから、js フォルダに移動して、development フォルダは削除してしまいましょう。
また、index.html は、ウェルカムページになっているので、ソースは空にしてしまいましょう。

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



↑目次に戻る

実装

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

ヘッダー

<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> 

スクリプト

$(function(){
	$('#datepicker').datepicker();
});

フォーム

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

はい、実装できました。

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

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

で、こうなります。

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

↑目次に戻る

  • dai ando

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

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

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

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

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

    よろしくお願いします。

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

    • hijiri

      > dai ando さん

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

      dateFormat: 'yy/mm/dd',
      

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

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

      $(function(){
      	$('#datepicker').datepicker({
      		/* 省略 */
      		showOn: 'button',
      		buttonImageOnly: true,
      		buttonText: '表示',
      		buttonImage: '画像のパス',
      	});
      });
      

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

      <button id="trigger">表示</button>
      <input type="text" id="datepicker" />
      
      $(function(){
      	$('#datepicker').datepicker({
      		/* 省略 */
      	});
      	$('#trigger').click(function() {
      		$('#datepicker').datepicker('show');
      	});
      });
      

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

      <input type="text" id="target" />
      
      <button id="trigger">表示</button>
      <input type="hidden" id="datepicker" />
      
      $(function(){
      	$('#datepicker').datepicker({
      		/* 省略 */
      		onSelect: function(date, instance) {
      			$('#target').val(date);
      		}
      	});
      	$('#trigger').click(function() {
      		$('#datepicker').datepicker('show');
      	});
      });
      
  • Pingback: jQuery UI Datepicker 日付選択 | Web memo()