Kalender/Datum und Uhrzeit picker für Twitter bootstrap

Zur Zeit arbeite ich an einigen Datums-und uhrzeitauswahl in einem twitter-bootstrap-Projekt. Ich finde immer die Kalender Sachen ein Schmerz im Arsch, daher diese Frage.

Gibt es massenweise Lösungen heraus dort für immer ein Arbeitskalender, html5-date-input, jquery-ui, pt-BR und die bootstrap-datepicker einige zu nennen. Diese haben alle Ihre vor-und Nachteile. Die html5-Lösung wohl das beste, da es hängt von der Browser-Implementierung, die oft gebaut, um passen Sie die Bildschirmgröße des Gerätes. Aber dies ist nicht umgesetzt in vielen Browsern noch und ist natürlich nicht unterstützt in der älteren version sowieso. Nicht alle der oben genannten Zeit haben, pickers, die erfordern würde, ein extra Eingang für die Zeit, die mit irgendeiner Art von Maske oder sowas...

Mein Projekt ist entworfen worden, um einfach zu sein zu verwenden, um ein Handy, und die Waage gut zu passen, kleine Bildschirme. Mit diesem ist Verstand, ein pop-up-Kalender ist vielleicht nicht die beste Lösung. Jedoch, finde keine Lösungen, die nicht mit einem pop-up...

Mein Ziel mit dieser Frage ist einfach nur, um mir zu helfen und andere zu finden, die eine gute und solide Art und Weise zu implementieren, Datums-und uhrzeitauswahl in eine web-Seite entwickelt, die für alle Bildschirme. Hat jemand irgendwelche Erfahrung mit einer der oben genannten, oder andere Lösungen?

InformationsquelleAutor Runar Halse | 2013-03-08
  1. 4

    Warum nicht verwenden die HTML5-date-input von Standard-und zurückgreifen, um die Bootstrap-datepicker-oder jQueryUI datepicker für IE8 und darunter. Einfach verwenden Sie die feature-Erkennung, um zu entscheiden, welche option verwendet werden sollte.

    Code zu erkennen, wenn die Eingabe Typ 'date' wird unterstützt:

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

    oder verwenden Sie die Modernizr-Bibliothek:

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

    Können Sie entweder diese in eine eigene Funktion:

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

    Dann initialisieren Sie Ihren date-Feld. Just add type="date", ob HTML5 unterstützt wird, oder befestigen Sie einen datepicker-plugins, wenn nicht:

    <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>

    Referenzen:

    InformationsquelleAutor eterps
Schreibe einen Kommentar