2017-09-11 5 views
0

私は、Google Chrome Browserのようにすべてのブラウザで<input type="time" />の動作を再現するjavascriptソリューションを探していました。入力のためのJSソリューション= time like Chrome

は基本的に、私はこれらのフィールドを必要とする:

<input type="time" /> 
<input time="text" class="timefield" /> 

はクロームでほぼ均等に動作します。 (私はボタンが必要ない)

誰もがこれをカバーするJavaScriptを知っていますか? これは既にオープンソースのソリューションがあると思っていましたが、何も見つけられませんでした。


これは私がこれまでにGoogle Chromeの時間フィールドを再作成するためにやったことです:

私は基本をカバーし、この便利なプラグインが見つかりました:それは焦点の入力を選択https://igorescobar.github.io/jQuery-Mask-Plugin/ を、数字だけと自動を受け入れますそれらを一度にフォーマットする。 これは私の知る限りはそれを得ることができるようです:

$('.timefield').attr('pattern', '^([01][0-9]|2[0-3]):([0-5][0-9])$'); 
    $('.timefield').mask("20:50", { 
    placeholder: "--:--", 
    selectOnFocus: true, 
    translation: { 
     2: {pattern: /[0-2]/}, 
     5: {pattern: /[0-5]/} 
    } 
    }); 

私はまだ重要なディテールが欠落しています:

  • は時間を入力すると、2意志よりも、任意の時間に大きな
  • を右から左に開始します
  • 分の場所にフォーカスジャンプを聞かせてフォーカスの時間と分の洗面所独立テキスト選択

そして、私はこれらの機能をどのように実装するのか分かりません。誰かが私がどのように始めなければならないか知っていますか?

答えて

0

私はブートストラップの日付ピッカーを使用することをお勧めします。それはあなたのプロジェクトに簡単に含めることができ、使いやすく、タイムピッカーに変更することができます。私はこれを達成するには、以下のリンクを使用:その提案を

http://bootstrap-datepicker.readthedocs.io/en/latest/

https://eonasdan.github.io/bootstrap-datetimepicker/

+0

おかげで、残念ながらそれは私が探していたものではありません。使い方が簡単で洗練されたソリューションではあるものの、入力するよりも時間を要するのに時間がかかります。効率的ではありません。 –

+0

さて、お手伝いをする方法がわからないことを申し訳なく思って、解決策を見つけることをお勧めします。 – mrdeadsven

関連する問題