メモ的な日記

プログラミングについての個人的メモ日記。PHPとかjQueryとかがメイン。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

キーボードからの時刻入力

前回がカレンダーで日付入力だったので、今回は時刻入力を。
キーボードからの時刻を入力出来るようにします。

外部ファイルは以下
・jquery.timeentry.js

まずは<head>部分にjQueryの呼び出しを記述。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<body>部分

<script type="text/javascript">
	<!--
		$(function(){
			$("#time1").timeEntry({ 
				show24Hours: false
			});
			
			$("#time2").timeEntry({ 
				show24Hours: true
			});
		});
	-->
</script>

<h1>Datetimepickerサンプル</h1>
<h3>キーボートから時間が入力出来ます。</h3>

<input type="text" name="time1" id="time1" value="">
<br><br>

<input type="text" name="time2" id="time2" value="">
時刻を24時間で表示

$("#[name属性]").timeEntryのshow24Hoursをtrueに設定すると24時間表示、flaseだとAM/PM表示になる模様。

こんな感じになります → サンプル
キーボードの数字、矢印キーで時刻が入力出来ます。

時刻を入力すると、分(minute)に現在時刻が自動入力されるみたい。
この辺りは使い方によっては邪魔になるかもしれないですねー。

あとは全角で数字入力すると動かない点。
入力制御もちゃんとしたほうがよさそう。

おわり。