日時の入力欄を、後の処理はしやすいままで、入力しやすくする（datetimepickerっぽいもの）

Tweet

Category JavaScript / Tagged jQuery 2012/11/27

問題

以下のような、日付と時間を入力するタイプの日時入力欄が入力しにくい。

YYYY-MM-DD hh:mm:ss形式で入力してもらえると楽なのはプログラマの都合。ユーザーには優しくない。

下図のような入力欄にしたい。

しかし、プログラム上は「日時」で管理されている項目なので、画面上は「日+時」になると、「日時」を分割したり、「日+時」を結合したりが面倒だ。

表面上はユーザーに優しいインターフェース、内部的にはプログラマに優しい処理をおこないたい。

答え

日時の入力欄を、後の処理はしやすいままで、入力しやすくするjQueryプラグインを作ってみる。

HTMLは以下のようにするだけ。

HTML

<input type="text" class="datetimepicker" name="entry_datetime" value="2012-11-01 12:30:00">

JavaScriptで、表面上は jqueryuiのDatepicker + 時刻プルダウンに変形する。

JavaScript

$(function(){
	$('.datetimepicker').each(function(){
		//日時はhiddenに切り替え。見た目は日付と時間入力に変更。
		var $dt = $('<input type="hidden">').attr('name', this.name).val(this.value);
		//見た目を調整するためのclassがあれば指定
		var $d = $('<input type="text">').addClass('calendar');
		var $t = $('<select></select>').addClass('input-small');
		$(this).after($dt, $d, ' ', $t);
		//日付の方はdatepickerにする
		$d.datepicker({dateFormat: 'yy-mm-dd','など、オプションを適当に':'指定してください'});
		//時刻の方は10分おきのプルダウンなどにする
		var hh = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
		var mm = ['00', '10', '20', '30', '40', '50'];
		for (var i = 0; i < hh.length; ++i) {
			for (var j = 0; j < mm.length; ++j) {
				var $o = $('<option></option>')
							.attr('value', hh[i] + ':' + mm[j] + ':00')
							.text(hh[i] + ':' + mm[j]);
				$t.append($o);
			}
		}
		//初期値があれば反映
		$d.val(this.value.replace(/^(\d\d\d\d-\d\d-\d\d).*$/, "$1"));
		$t.val(this.value.replace(/^.*(\d\d:\d\d:\d\d).*$/, "$1"));
		//日付変更時と時間変更時にhidden化した方へ値を反映する処理を仕込んでおく
		function x(){$dt.val($d.val() + ' ' + $t.val());}
		$d.datepicker('option', 'onSelect', x);
		$d.on('change', x);
		$t.on('change', x);
		//オリジナルはさようなら
		$(this).remove();
	});
});

こんなふうになります。

図解

Demo

デモはこちら

フォームから送信される値は、type=”hidden”にして見えなくした要素にJavaScriptで入れている日付と時刻を結合したものになる。サーバー側での後の処理が楽。

日付形式が必ずYYYY-MM-DD hh:mm:ss形式で、プルダウンは10分おきで秒は指定しないといった前提条件の下で作ってあるので、状況に応じてカスタマイズすること。