3

私は現在、twitter ブートストラップ プロジェクトで日付と時刻のピッカーに取り組んでいます。私はいつもカレンダーのことを面倒だと思っているので、この質問をします。

稼働中のカレンダー、 html5 日付入力、jquery-ui、pt-BR、およびブートストラップ日付ピッカーを取得するためのソリューションはたくさんあります。これらにはすべて長所と短所があります。デバイスの画面サイズに合わせて構築されることが多いブラウザーの実装に依存するため、html5 ソリューションが最適な場合があります。しかし、これはまだ多くのブラウザーで実装されておらず、もちろん古いバージョンではサポートされていません。上記のすべてにタイムピッカーが含まれているわけではありません。これには、ある種のマスクまたは何かを使用して、時間の追加入力が必要になります...

私のプロジェクトは、携帯電話で簡単に使用できるように設計されており、小さな画面に合わせて適切にスケーリングされます。この点を考慮すると、ポップアップ カレンダーは最適なソリューションではない可能性があります。ただし、ポップアップを使用しないソリューションは見つかりません...

この質問に対する私の目的は、すべての画面用に設計された Web ページに日付と時刻のピッカーを実装するための確実な方法を私や他の人が見つけられるようにすることです。上記のいずれか、または他のソリューションの経験がある人はいますか?

4

1 に答える 1

4

デフォルトで HTML5 日付入力を使用して、Bootstrap 日付ピッカーまたは IE8 以下の jQueryUI 日付ピッカーにフォールバックしないのはなぜですか。機能検出を使用して、使用するオプションを決定するだけです。

入力タイプ「日付」がサポートされているかどうかを検出するコード:

var i = document.createElement("input");
i.setAttribute("type", "date");
return i.type !== "text";

または Modernizr ライブラリを使用します。

if (!Modernizr.inputtypes.date) {
  // no native support for <input type="date"> :(
}

これらのいずれかを独自の関数に入れることができます。

function dateTypeIsSupported() {
  // do one of the above methods and return true or false
}

次に、日付フィールドを初期化します。HTML5 がサポートされている場合は type="date" を追加するか、サポートされていない場合は datepicker プラグインを追加します。

<html>
  <input id='myDateField' />
</html>

<script>
  if ( dateTypeIsSupported() ) {
      // HTML5 is a go!
      document.getElementById('myDateField').type = 'date';
  } else {
      // No HTML5. Use jQueryUI datepicker instead.
      $('#myDateField').datepicker();
  }
</script>

参考文献:

于 2013-03-08T20:59:05.157 に答える