日付入力テキストボックスを手入力は禁止してdatepickerからのみ入力可とする

‘start_date’という名前のテキストボックスがあり
必須入力で手入力は禁止してdatepickerからのみ入力可とする方法

inputタグに’readonly=”readonly”‘を設定するとOKな気がするけど
なんとreadonlyを設定すると、必須入力（required）が効かなくなる。

なので、readonlyをやめて
start_dateのkeyDownイベントで全てのkeyDownを無効にしてみた。

$("#start_date").keydown(function(event) {
	return false;
});

しかし、半角文字はOKなんだけど、全角文字はkeyDownイベントが発生しない。

全角文字分のみをテキストボックスに入れないようにするのは難しいので
テキストボックスからフォーカスが外れたら全角のチェックをして
半角数字と’/’（スラッシュ）以外が入っていた場合は、エラーメッセージを表示しテキストボックスを空にするようにした。

$("#start_date").change(function() {
	if ($(this).val().match(/[^0-9\/]/)){
		alert('半角数字と'/'以外の文字は使用できません');
		$(this).val('');
	}
});

これで、キーボードからの入力が出来なくなったけど
過去の入力履歴を選択してセットすることは出来てしまうので
autocomplete=”off”
を指定することにより履歴の表示をoffにする。

サーバ側でもバリデーションは行わないといけないけど
これでクライアント側で出来るだけのチェックは出来たんじゃないかと思う。