web-dev-qa-db-ja.com

jQueryタイムピッカー

テキスト入力に、ユーザーが15分間隔で選択できる時間を入力したいと考えています。私はそこにいくつかのプラグインがあることを知っています。 「業界標準」のプラグインがあるのか​​、それとも一般的なシナリオで特定のプラグインを好む強い客観的な理由があるのか​​と思っていました。

72
Bernardo

私は このプラグインgithubリポジトリ )が他の言及されたものに勝っていることを発見しました。 Googleカレンダーのタイムピッカーを模倣しています。

86
Jim Geurts

私は大量のタイムピッカーを試しましたが、満足していなかったので、もう1つ書きました。うまくいくと思う。また、日付ピッカーからインスピレーションを受けているため、標準のjQuery UIのように見えます。

デフォルトの分単位の増分は5で、オプションで15に設定できます。

http://fgelinas.com/code/timepicker

35

私のアドバイスはこれをしないことです。日付を入力するためだけにカレンダーコントロールを使用することを余儀なくされて、特に別の奇抜なコントロールをナビゲートするよりもずっと早く日付を入力するオプションが与えられていない場合、私は十分に悪いと思います。

タイムピッカーは、この種のUIフェティッシュを新たな極限に持っていくだけです。ユーザーが時間を入力するか、または数時間分のドロップダウンボックスを使用することを許可しないのはなぜですか。ドロップダウンリストでさえ、ユーザーは時間を入力するだけです。 Shog9の答え のタイムピッカーは、すべて見るのに非常に便利ですが、使用するのは非常に面倒です。私がデータ入力アプリを使用しなければならないエンドユーザーであり、ページ上にそのようなコントロールがあった場合、それはただ私を遅くし、開発者の手を差し出したいと思うようにします。 :)

アプリの見栄えを整える前に、まずユーザビリティについて考えてください。

ただ私の謙虚な意見。

20
Kev

JQueryではありません...しかし、午前8時、午前8時15分、午前8時30分などの15分間隔のリストを含むドロップダウンは、ユーザーにとって非常に簡単に操作できることがわかりました。

本当に jQueryでこれを行う方法が必要かどうかわからない...やり過ぎかもしれません。 realユーザーとビジネスアプリケーションの開発に関する私の個人的な経験に基づく意見です。

10
mattruma

適切なタイムパーサーを使用して、ユーザーが広範囲の有効な時間文字列(8:00 AM、8AM、8a、8など)を入力できるようにすることに関心がある場合は、 http:/ /www.datejs.com/

これが、私がそれを操作するために使用しているjqueryコードです。

$('.time').blur(function (e) {
    var val = $(this).val();
    if (!isNaN(val))
        // add minutes to numeric value otherwise it will be interpreted as a date
        val = val + ':00'; 
    var dt = Date.parse(val);
    $(this).val(dt.toString('h:mm tt'))
});
8
Brian

ケブを除くすべての答えは主観的だと思います。ネット上で10分の1の時間ピッカーJQueryプラグインを見てきましたが、ほとんどは無駄な時間のかかる仕掛けでしたが、すでに標準のJquery datepickerを使用している場合は、 このプラグイン が適切です。

5
S Bogdan

このすばらしいライブラリを試してください- http://code.google.com/p/mobiscroll/

デモ- http://demo.mobiscroll.com/

4

Maxime Haineaultの jQuery.timepicker を確認してください。かっこいい、私見...

4
Shog9

私が今まで使った中で最高のものは、Telerikが提供したものです。

http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

目立たないため、ユーザーは時間を入力するか、時計アイコンをクリックしてリストから選択するだけです。基本的には、編集可能なドロップダウンを使用する、より審美的に魅力的な方法です。

4
Merritt

トレントリチャードソンのタイムピッカーライブラリ を使用していて、すばらしいことがわかりました。ダウンロード数でも非常に人気があります。

3
Ninja

ここに私のテーマを試してみてください: http://yoka.github.com/jquery-timeselect/

3
yoka

標準的なものはありませんが、私は Keith WoodのjQueryプラグイン を使用しています。一部とは異なり、これは(検証を実行している間に入力可能なテキストボックスになります。また、必要に応じてマウスでも使用できます。

1
Rowland Shaw

私が書いた Jimが言及したプラグインに基づいて(Googleカレンダータイムピッカーのように動作します)、jquery ui autocompleteを使用して動作します。前述のプラグインよりもはるかに安定しています。私はその1つをページ上に配置することに問題がありました。プラグインは、配列、時間範囲、間隔、またはajaxソースを取得します。したがって、自分の心のコンテンツに合わせてカスタマイズできます。

1
hazmat

私の状況はわずかに異なっていました。日付ピッカーが必要でしたが、それも見つかりませんでした。だから私は1つを書くことにしました。 完全なソースはこちら ;を見つけることができます。 簡単なデモ も投稿しました。

1
Petras

私が望むものを実行したプラグインを見つけることができませんでした(つまり、複数列のオートコンプリートと時間の入力マスキングを組み合わせた)、私は MenuOptions と書きました

それはどのようなものか - enter image description here

1
MIkee

Any + Time™DatePicker/TimePicker AJAX Calendar Widget を使用すると、マウスを使用する場合、手で入力するのと同じくらい速いが、エラー防止の利点時間は必要に応じてフォーマットできますキーボード操作もサポートしますが、キーボードのアクセスはマウスやタイピングほど高速ではありませんが、値が必要な形式であることを保証します。カスタマイズも簡単で、日付も処理できます。