メモ的な日記

プログラミングについての個人的メモ日記。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)に現在時刻が自動入力されるみたい。
この辺りは使い方によっては邪魔になるかもしれないですねー。

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

おわり。

datepickerで日付入力

トップにあるように、jQueryメインでメモがてら書いていこうと思います。
便利そう、面白そうと思ったものをとりあえず作ってみる感じ。

今回はjQueryを使い、テキストボックスからカレンダー表示し、日付選択ができるスクリプトです。
外部ファイルとして配置しているのは以下の3つ。
・ui.datepicker.js
・ui.datepicker-ja.js
・flora.datepicker.css

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

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

<body>部分はこんな感じで。

<link rel="stylesheet" href="flora.datepicker.css" type="text/css">
<script type="text/javascript" src="ui.datepicker.js"></script>
<script type="text/javascript" src="ui.datepicker-ja.js"></script>

<script type="text/javascript">
<!--
	$(function(){
		$("#calendar1").datepicker();
		$("#calendar2").datepicker();
		$("#calendar3").datepicker();
	});
	
-->
</script>

<p><input type="text" name="calendar1" id="calendar1" value=""></p>
<p><input type="text" name="calendar2" id="calendar2" value=""></p>
<p><input type="text" name="calendar3" id="calendar3" value=""></p>

かなり簡素だけど一応サンプル

カレンダー

2024/04

S	M	T	W	T	F	S
	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

リンク

カテゴリー

HTML(1)

フリーエリア

メモ的な日記

[PR]

テキストエリアにヘルプ表示

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

datepickerで日付入力