jQuery UI Datepicker 日付選択

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 に実装していきます。

ヘッダー

<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

↑目次に戻る

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” ですね…
  正しくは以下となります。記事も修正済みです。
```
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');
	});
});
```
  返信

hijiriworld Web