PowerHour Development Blog jQuery Timebox Plugin

何時何分を入力してもらう際に便利に使えるjQueryプラグイン「Timebox」。
<input type="text">な要素の中に何時何分というのを直接入れてもらう場合に使えます。

例えば、16 を入力すると、16:00 に変換され、152 と入力すると 1:52 として解釈され、テキストボックスの内容が自動で置換されます。
意味のないアルファベットなどを入れると 00:00 に変換されます。変換例は次の通り



初期化方法は、次のように $(element).timebox() で初期化するだけです。

<input id="myTimebox" class="timebox" type="text" />
<script>
$('input.timebox').timebox();
</script>

何時にするか、というインタフェースはマウスやキーボードを使った方法で、色々と考えられますが、これならキーボードベースが好きな訪問者にとっては入力しやすいものになってますね。
スケジュールアプリなんかの利用頻度の高いアプリなんかに組み込んでみると入力の面倒さを削減できるかもしれませんね。

関連エントリ

• これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」
• jQueryを使ったカレンダー型、日付入力補完ライブラリ
• 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン