jqueryまたはスタンドアロンjsに適したピッカーは何ですか?Googleのカレンダーで、15分間隔の一般的な時間のドロップダウンがあるか、手動で時間を入力して検証できるようにしたいのですが。
jqueryまたはスタンドアロンjsに適したピッカーは何ですか?Googleのカレンダーで、15分間隔の一般的な時間のドロップダウンがあるか、手動で時間を入力して検証できるようにしたいのですが。
回答:
いくつかのリソース:
これは日付まで私が見つけた最高のものですhttp://trentrichardson.com/examples/timepicker/
以下は、Twitter Bootstrapで動作するものです。
提案された時間ピッカーに満足できなかったので、PeriferとHTML5仕様からインスピレーションを得て独自の時間ピッカーを作成しました。
http://github.com/gregersrygg/jquery.timeInput
あなたはどちらかを使用することができ、新しいHTML5の属性を、時間入力(ステップ、MIN、MAX)のために、またはオプションのオブジェクトを使用します。
<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<input type="time" name="myTime2" class="time-mm-hh" />
<script type="text/javascript">
$("input[name='myTime']").timeInput(); // use default or html5 attributes
$("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900}); // 15 min intervals from 6:00 am to 3:00 pm
</script>
次のような入力を検証します。
HTML5仕様ではam / pmまたはローカライズされた時間の構文は許可されていないため、hh:mmの形式のみが許可されます。仕様に従って秒は許可されていますが、まだ実装していません。
それは非常に「アルファ」なので、いくつかのバグがあるかもしれません。パッチ/プルリクエストを送ってください。IE 6&8、FF、Chrome、Opera(後者はLinuxで最新の安定版)で手動でテスト済み。
誰かが別のJavaScript TimPickerに興味がある場合に備えて、私はその仕事をするjQueryプラグインを開発して維持しています。これはEZ Time JS(5分前まで知らなかったものの、Dのようなもの)のように機能し、ユーザーが快適に感じるほとんどすべての方法で時間を入力し、入力を一般的な形式に変換できます。
jQuery TimePicker Optionsページをチェックして、実際の動作を確認してください。
NoGrayは素晴らしいアイキャンディですが、ユーザビリティに関するいくつかの考慮事項があります。第一に、アナログ時計はますます曖昧になり、若い人たちは時々それらを読むのが困難です。次に、スライダーを使用する時間ピッカーのように、マウスで特定の時間にドラッグするのは少し面倒です。第三に、このピッカーのキーボード操作は少し散発的です。
より使いやすい時間ピッカーについては、Any + Time™Datepicker / Timepicker AJAX Calendar Widgetをチェックしてください。シンプルなボタンを使用して特定の時間をすばやく簡単に選択できるため、これはおそらく最も高速で使いやすい時間ピッカーです。
使いやすさの興味深いテストは次のとおりです。奇数の時間(たとえば、午後10時32分)を選び、さまざまな時間ピッカーを使用してその時間を正確に選択するのにかかる時間を確認します。おそらく、Any + Time™を使用すると、手作業で時間を書き出すよりも速く実行できます。そのため、別のピッカーを探してみてください。言うまでもなく、Any + Time™は、無数のさまざまな日付/時刻形式、12/24時間制、CSS(またはjQuery UI)の完全なカスタマイズ、さらにはタイムゾーンまでサポートしています。