【jQuery UI】datepickerで年/月/日で別々のフォームにしたい時

Tweet

Category JavaScript / Tagged jQuery 2012/05/03

問題

jQueryUIのdatepickerは、基本は1つのinputに対してのみ処理を行うようにできていますが、年、月、日の3つに分けて入力させるにはどうするとよいでしょう。

答え

・カレンダーを開く際には3つの年月日フォームから値を取得する。
・カレンダーが確定したときに3つの年月日フォームを更新する。

という形で実装してみる。

年/月/日で別々のフォーム – デモ

サンプルコード – HTML

<div>
	<input type="text" value="" class="year" size="4" /> 年
	<input type="text" value="" class="month" size="4" /> 月
	<input type="text" value="" class="date" size="4" /> 日
	<input type="text" value="" class="datepicker2" style="display:none;" />
</div>

サンプルコード – Javascript

	$('.datepicker2').datepicker({
		dateFormat : "yy/mm/dd"
		,dayNamesMin: ['日', '月', '火', '水', '木', '金', '土']
		,showOn: "button"
		,buttonImageOnly : true
		,buttonImage : "./wp/wp-content/uploads/2012/01/calendar.gif"
		,beforeShow : function(input,inst){
			//開く前に日付を上書き
			var year = $(this).parent().find(".year").val();
			var month = $(this).parent().find(".month").val();
			var date = $(this).parent().find(".date").val();
			$(this).datepicker( "setDate" , year + "/" + month + "/" + date)
		},
		onSelect: function(dateText, inst){
			//カレンダー確定時にフォームに反映
			var dates = dateText.split('/');
			$(this).parent().find(".year").val(dates[0]);
			$(this).parent().find(".month").val(dates[1]);
			$(this).parent().find(".date").val(dates[2]);
		}
	});

beforeShow はカレンダーが開く前の処理、onSelectは日付をカレンダーから確定したときに呼ばれる処理です。