jQueryUI timePicker-時間を選択するためのウィジェット

1. 要素が解決すべき主なタスクは、キーボードなしでのフィールドへの時間の入力の高速化です。 理想的には、2回のクリックで。 タイミングアルゴリズムは直感的でなければなりません。
2. タッチスクリーンの最初の焦点。 この要素は、画面上の不要なポップアップキーボードデバイスを防ぐ必要があります。 可能であれば、入力フィールドを閉じたり、画面を超えないように、画面上に正しく配置されます。
3. デスクトップマシンでは、ユーザーが入力の主要な手段として使用する場合、ユーザーがキーボードからフィールドに入力するのを妨げないでください。 ヘルプは、たとえば、分離する「：」文字の自動置換で構成されます。 つまり 人が数字だけを入力すれば十分です。
4. 古いブラウザとの互換性を確保します。 はい、はい-IE6がなければ、どこにもありません。 ターゲット情報キオスクは、あなたが知っている人のライブラリと正確にそのバージョンに基づいた特殊なソフトウェアを使用します。
5. jQueryUIカレンダーとの互換性を確保します。 私たちの要素は、お気に入りのカレンダーが既に添付されているフィールドで正しく機能し、それを補完し、干渉しないようにする必要があります。
6. 接続と使用は簡単なはずです。

<link rel="stylesheet" href="clock-ui.css" type="text/css"/> <script language="javascript" src="clock-ui.min.js"></script> 

 $('input.time').timePicker(); 

 $('.date') .datepicker({dateFormat: 'dd.mm.yy T'}) .timePicker(); 

• タッチスクリーンパラメータは、要素に現在のデバイスタッチの種類を示します。 実際、要素自体はそのようなデバイスを識別できます。 ただし、情報キオスクでのテストの過程で、情報キオスク画面はタッチセンシティブですが、タッチスタートイベントの組み込みブラウザーはサポートしないという事実に遭遇しました。 これは、要素の誤動作につながりました。 このような状況を解決するには、パラメーターを使用します。
• 互換性のあるパラメーター（デフォルトはtrue）。 古いブラウザと互換性があるように設計されています。 たとえば、要素はブラウザがborder-radiusとbackground-sizeをサポートする必要があります。そうしないと、レイアウトが正しくなくなります。 これらのプロパティがサポートされている場合は、たとえば次のようにcompatible = falseを設定してください。
  
  

   $('.time').timePicker({ compatible: !(Modernizr.backgroundsize && Modernizr.borderradius) }); 

  
  
• defaultHour 、 defaultMinuteパラメーターは、空のフィールドのデフォルト時間を設定します。 時刻は12時間形式（ゼロから）で設定されます。 PM （論理）パラメーターは午後を示します。 たとえば、次のコードにより、要素は空のフィールド（または最初は誤って入力された）について12:00であると見なします。
  
  

   $('.time').timePicker({ defaultHour: 0, defaultMinute: 0, PM: true }); 

  
  
• 最後に、 onOpened 、 onClosedは、それに応じてウィジェットを開閉するようにハンドラーを設定します。 重要な注意：ハンドラーは、ウィジェットの可視性が変更された後に呼び出されます。

 var hours = $('#element').data().hours, minutes = $('#element').data().minutes, pm = $('#element').data().pm_time; 

 $('#element').date().time; 

 $('#element').datepicker('getDate')