web-dev-qa-db-ja.com

モバイルデバイス用の時間ピッカー

私はHTML5、CSS3で作業しており、プロジェクトにjQueryを使用しています。 iPad、Galaxyなどのモバイルデバイスでは、タイムピッカーのみが必要です-日付ピッカーは必要ありません。タッチスクリーンデバイスと非タッチスクリーンデバイスの両方で動作するはずです。スライダー付きのものを見つけましたが、モバイルデバイスでは失敗しました。

16
Mustehsan Ikram

チェックアウト DateBox 。私はそれがあなたが必要とするものを正確に行うと思います:

timepicker

19
fretje

見栄えの良い別のものを見つけました。また、プラットフォームごとにスタイルが異なります。 mobiscroll

mobiscroll time pickermobiscroll time picker ios

14
fretje

タイムピッカー機能を取得するためにサードパーティのプラグインは必要ないことを、私は喜んで教えてくれます。

HTML5にはすでにネイティブの時間ピッカーがあり、実装は非常に簡単です。

<label for="timePicker1">Set Time:</label>
<input type="time" name="timePicker1" id="timePicker1" value="10:00">

JQueryを使用すると、値の読み取りと書き込みは同じくらい簡単です。

var time = $('#timePicker1').val(); //<- Get value
$('#timePicker1').val("09:30");     //<- Set value

Set/getの値は、「hh:mm」という形式の文字列です。

JQuery Mobile 1.4.2では意図したとおりに動作します。

ここには別の便利なHTML5コントロールもあります: http://www.w3schools.com/html/html5_form_input_types.asp

よろしく。

5
Jhollman Cutcsa

このjQuery Time Pickerは、既存のDatepickerに基づいて作成しましたが、これは時間のみです。モバイルデバイスで試したことはありませんが、うまくいくと思います。

あなたはそれを試すことができます: http://fgelinas.com/code/timepicker

3

JQuery mobileが最近、日付と時刻の選択コードを更新したようです。こちらのデモをご覧ください(モバイルデバイスでのみ正しく機能する可能性があります): http://jquerymobile.com/test/docs/forms/textinputs/

1
Clay

興味深い問題-最初のJquery datepicker(timepickersを含む)の例を試しました:

http://plugins.jquery.com/project/cantipi

それは私のiPhoneで一度動作しますが、それ以降のタッチイベントに応答しません。

それから私は2番目のものを試しました:カレンドリカル

http://tobiascohen.com/demos/calendrical/

IPhoneで時刻を設定してリセットすることができました。やってみましたか?

Senchaでタッチイベントを調べ、そのタイマーを検討することもできます。

1
headwinds

オーダーメイドのタイムピッカーではなく、ネイティブのタイムピッカーを探していました。これは、Android 4.0+で非常にうまく機能することを発見しました。iOSではまだテストしていません。

http://bikasv.com/blog/2013/04/14/cordova-datepicker/

0
Greg