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

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

<通常のdatepicker>

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

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

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

【サンプル】

【準備するもの】

【手順】

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

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

ヘッダ部分:

<script type="text/javascript" src="lib/jquery/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/i18n/jquery.ui.datepicker-ja.js"></script>
<script type="text/javascript">
	$(function() {
		$("#datepicker0").datepicker();
		$("#datepicker0").datepicker("option", "minDate", 0); ///カレンダー最小値 0は今日。昨日は-1、明日は1。又は下記maxDateと同様のフォーマットも可
		$("#datepicker0").datepicker("option", "maxDate", new Date(2014, 12 - 1, 31));///カレンダー最大値プログラムから動的に出してももいいですね。
		$("#datepicker0").datepicker("option", "showOn", 'button');
		$("#datepicker0").datepicker("option", "buttonImageOnly", true);
		$("#datepicker0").datepicker("option", "buttonImage", 'img/Initialregistration/icon_date.png');
		$('#datepicker0').bind("change", function() {
			setDatePulldown($(this).val());
		});
		
		$('#y').bind("change", function() {
			setDateHidden();
		});
		
		$('#m').bind("change", function() {
			setDateHidden();
		});
		
		$('#d').bind("change", function() {
			setDateHidden();
		});
	});
	
////Datepickerの日付がクリックされた時にプルダウンを変更させる関数
	function setDatePulldown(date) {
		var dates = date.split('/');
		$("#y").val(dates[0]);
		$("#m").val(dates[1]);
		$("#d").val(dates[2]);
	}
////プルダウンが変更されたときに日付をDatepickerに反映させる関数
	function setDateHidden() {
	　　　　if ($("#y").val() == '--' || $("#m").val() == '--' || $("#d").val() == '--') {return;}
　　　　	var year = parseInt($("#y").val());
		var month = parseInt($("#m").val());
		var day = parseInt($("#d").val());
		var newdate = year + "/" + month + "/" + day;
		$('#datepicker0').val(newdate);
	}
	
</script>

HTMLのbody内:

<form>
                <select id="y" name="year">
                    	<option>--</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
                    </select>年　
                    <select id="m" name="month">
                    	<option>--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
                    </select>月　
                     <select id="d" name="day">
                    	<option>--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
      <option value="24">24</option>
      <option value="25">25</option>
      <option value="26">26</option>
      <option value="27">27</option>
      <option value="28">28</option>
      <option value="29">29</option>
      <option value="30">30</option>
      <option value="31">31</option>
                    </select>日
            	<input type="text" id="datepicker0" name="datepicker0" style="display: none;"/>
</form>

※パスはお使いの環境によって書き換えてください。
※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());
});
の部分は削除できます。

2024年4月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル