jQuery UI Datepickerの日付をプルダウン表示に対応させてみた。

Facebooktwittergoogle_plus


JavaScriptでカレンダーを使い日付を取り出す場合は、フォームのtextに’yyyy/mm/dd’形式に入れたほうが、バックエンドのプログラムやDBとのやりとりにも便利です。jQuery UI Datepickerなどはそうですね。
textなどの自由入力欄にすると、想定されているフォーマット以外の文字を入れられる場合の処理を追加する必要があり大変だ、という考えもありますが、入力不可にしたり、カレンダーを入力欄にかぶせて表示させるなどの工夫で回避できます。
picker.jpg
<通常のdatepicker>

プルダウンだと、DBに入れるために年・月・日のテキストを結合し、DBから取り出したらまた年・月・日に分割してプルダウンを作るなど、何かと面倒です。

しかーし、やはり、プルダウンで年月を表示させたいと言うお客さんはいますよね。またもともとそういう仕組なので、バックエンド側に変更を加えたくないという意向も有ります。

そこで、jQuery UI のDatepickerを使って簡単に日付のプルダウンに対応させる方法をご紹介します。

【サンプル】




【準備するもの】

【手順】

  1. 年・月・日のプルダウンを作成。ここではそれぞれIDを’y’, ‘m’, ‘d’とします。
  2. Datepickerが使うtext要素をフォームに作成。ここではIDを’datepicker0’とします。スタイル指定をdisplay: noneにして画面上では見えないようにします。
  3. datepicker0の値が変更された場合プルダウンに反映させるための関数を作ります。ここではsetDatePulldownという関数名にします。適当にもっとセンスのいい名前にしてもけっこうです。
  4. プルダウンが変更されたときにdatepicker0の値も変更されるようにもう一つ関数を作ります。ここではsetDateHiddenという名前にしました。
  5. datepickerを実装します。プルダウンの横にカレンダーのアイコンを表示させ、それをクリックするとカレンダーが表示されるタイプにしたいので、オプションのbuttonImageOnlyをtrueにします。
  6. おなじみ$(function());内でdatepicker0やプルダウンが変更されたときに3,4で作った関数が呼び出されるようにイベントを登録します。

実際のソースコードはこうなります。
ご覧の通り、やってることはdatepickerが書き出した値をプルダウンに反映させているだけで、至極単純です。

ヘッダ部分:

 

HTMLのbody内:

 

※パスはお使いの環境によって書き換えてください。
※jquery.ui.datepicker-ja.jsのdateFormat: とプルダウンの日付のフォーマット、(mmかmか)を一致させる必要が有ります。

以上です。

2011/06/30追記:
さっき気づいたんですが、UI Datepickerにはそもそも以下のイベントに対応するようになっています;

  • create — datepickerが作られたとき
  • beforeShow — カレンダーが表示される直前
  • beforeShowDay — それぞれの日付が表示される前
  • onChangeMonthYear — 月と年が変更されたとき
  • onClose — カレンダーが閉じられたとき
  • onSelect — 日付が選択されたとき

そこで、このプルダウン対応も、onCloseかonSelectでsetDatePulldownをコールするように変更できます。
こっちのほうがスマートかも。ただ、あまり行数の節約にはなりませんが。

一番頭にある

$(“#datepicker0”).datepicker();

$(“#datepicker0”).datepicker({
onSelect: function(dateText, inst) {
setDatePulldown(dateText);
}
});
に変更します。

これで、
$(‘#datepicker0’).bind(“change”, function() {
setDatePulldown($(this).val());
});
の部分は削除できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload the CAPTCHA.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください