良いJavascript時間ピッカーとは何ですか?[閉まっている]


86

jqueryまたはスタンドアロンjsに適したピッカーは何ですか?Googleのカレンダーで、15分間隔の一般的な時間のドロップダウンがあるか、手動で時間を入力して検証できるようにしたいのですが。


スピンボタン付きの非常にシンプルなタイムピッカーここ
om39a

13
質問を再開することをお勧めします。すべてのカテゴリに例外があるべきであるように、「建設的でない」カテゴリには例外があることを認識することが重要です。このような質問には、答えがプログラミングの知識を必要とし、簡単に調査できないものを含めると思います。
Dan Nissenbaum、2015

回答:


74

56
...そしてその中の見物人ではない
ルドゥ

3
TimeDatePickerは、おそらく最高の一つです。
JDスチュアート

9
TimeDatePickerが選択リストよりもどのように改善されているのか、実際にはわかりません。
Jon z

3
ほとんどのライブラリが壊れている
FooBar

6
これははるかに優れています:weareoutman.github.io/clockpicker
Stefan Steiger

26

これは日付まで私が見つけた最高のものですhttp://trentrichardson.com/examples/timepicker/


2
アプリケーションによっては、これも私のお気に入りの1つです。ただし、分のステップ周期を1から15に変更する必要はありましたが、それは非常に簡単でした。
Chris Dutrow、2010

リストから私のお気に入り。簡単でシンプル、そして必要なものです。私は以前にAny + Time™Datepicker / Timepicker AJAXカレンダーウィジェットを使用しましたが、代わりにこれを試してみるつもりです。
ダニエル

Webサイト(およびJavaScriptの例)は使用できなくなりました。そのサンプルは他にありますか?
James Moberg 2014年

2
スライダーは、正確な時間を選択するための最も簡単または最も簡単な方法ではありません。
mpen 14

@Mark私はあなたの意見に同意します。最も簡単な方法は、選択リストにするか、ユーザーが入力できるように電卓パッドを表示することです。
Felix 14


8

提案された時間ピッカーに満足できなかったので、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で最新の安定版)で手動でテスト済み。


1
デモはありますか?
mpen 14

申し訳ありません。私はそのプロジェクトに4年間触れていません。プルリクエストを送信してください:)
2014

6

jQueryの作成者であるJohn Resigの投稿は、http://ejohn.org/blog/picking-time/で読むことができます。


4
平均的なユーザーにとってはマウスの精度が高すぎます。また、その使用方法がすぐに明らかになるわけではありません(彼が「直感的」だと彼が主張しているにもかかわらず)。
mpen 14

4

私はClockPickを使用しています


悪くはありませんが、要素の配置はオフです。
mpen 2014

これは私にフラッシュを更新するように頼む魚のようなページにつながりました。リンクを確認して更新してください。
lets0code

3

CSSギャラリーには、さまざまなタイムピッカーがあります。見てください。

Perifer DesignのタイムピッカーはGoogleのものに似ています


1
ああPeriferはまさに私が探しているものですが、検証を行っていないようです。つまり、「999999999」を値として入力できます
エレメント

3

誰かが別のJavaScript TimPickerに興味がある場合に備えて、私はその仕事をするjQueryプラグインを開発して維持しています。これはEZ Time JS(5分前まで知らなかったものの、Dのようなもの)のように機能し、ユーザーが快適に感じるほとんどすべての方法で時間を入力し、入力を一般的な形式に変換できます。

jQuery TimePicker Optionsページをチェックして、実際の動作を確認してください。


デモが壊れています(または、使い方がわかりませんでした!)。
PhiLho 2016

1

すみません。多分少し遅れます。私はNoGrayを使用しています。


4
誰か(オリジナルのポスターである必要はありません)が役立つと感じるのに遅すぎることは決してありません。... ...ことを除いてNoGrayが ...すでにCMSで言及されている
畏怖


-1

NoGrayは素晴らしいアイキャンディですが、ユーザビリティに関するいくつかの考慮事項があります。第一に、アナログ時計はますます曖昧になり、若い人たちは時々それらを読むのが困難です。次に、スライダーを使用する時間ピッカーのように、マウスで特定の時間にドラッグするのは少し面倒です。第三に、このピッカーのキーボード操作は少し散発的です。

より使いやすい時間ピッカーについては、Any + Time™Datepicker / Timepicker AJAX Calendar Widgetをチェックしてください。シンプルなボタンを使用して特定の時間をすばやく簡単に選択できるため、これはおそらく最も高速で使いやすい時間ピッカーです。

使いやすさの興味深いテストは次のとおりです。奇数の時間(たとえば、午後10時32分)を選び、さまざまな時間ピッカーを使用してその時間を正確に選択するのにかかる時間を確認します。おそらく、Any + Time™を使用すると、手作業で時間を書き出すよりも速く実行できます。そのため、別のピッカーを探してみてください。言うまでもなく、Any + Time™は、無数のさまざまな日付/時刻形式、12/24時間制、CSS(またはjQuery UI)の完全なカスタマイズ、さらにはタイムゾーンまでサポートしています。


素敵なピッカー。非商用利用は無料ですが、商用プロジェクトのライセンス費用については開発者に問い合わせる必要があります。
Andrew Lewis、

6
たまたま彼が開発者なのです...
steve_c

分の10と1を別々に選択する必要はありません。それほどの精度が必要になることはほとんどありません。10と1を組み合わせ、12行を5分単位で作成します。それは、時間に合わせて調整され、より速く、ほとんどのユースケースで十分です。また、これらのボタンの上にカーソルを置くと、カーソルをハンド/ポインターに変更することを検討できます。
mpen 2014

フィードバックをお寄せいただきありがとうございます!私は、最新の選択が必須ではないときに自動的に少ないボタンを提供する置換ライブラリに取り組んでいます。
アンドリューM.アンドリュースIII

any + timeページには数千行のテキストとコードが含まれていますが、ページに日付/時刻ピッカーの1つの動作するサンプルデモが見つかりませんでした。ため息...ある種のデモがどこか上。
Heriberto Lugo
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.