Was ist ein guter Javascript Time Picker? [geschlossen]

86

Was ist eine gute Zeitauswahl für jquery oder eigenständige js? Ich möchte etwas, das Google in seinem Kalender verwendet, wo es eine Dropdown-Liste der üblichen Zeiten in Intervallen von 15 Minuten enthält oder Sie eine Zeit manuell eingeben und validieren können.

javascript jquery time input Element
quelle
Eine sehr einfache
Zeitauswahl
13
Ich empfehle, die Frage erneut zu öffnen. Es ist wichtig zu erkennen, dass die Kategorie "nicht konstruktiv", wie jede Kategorie, Ausnahmen haben sollte - ich würde denken, auch für Fragen wie diese, bei denen die Antwort Programmierkenntnisse erfordert und nicht leicht zu recherchieren ist.
Dan Nissenbaum

Antworten:

26

Dies ist das Beste, was ich bis zum Datum gefunden habe: http://trentrichardson.com/examples/timepicker/

Felix
quelle
2
Je nach Anwendung ist dies auch einer meiner Favoriten. Ich musste zwar die Minutenschrittzeit von 1 auf 15 ändern, aber das war sehr einfach.
Chris Dutrow
Mein Favorit von der Liste. Es ist einfach, einfach und was es braucht. Ich habe bereits das AJAX-Kalender-Widget Any + Time ™ Datepicker / Timepicker verwendet, aber ich werde es stattdessen versuchen.
Daniel
Die Website (und das Javascript-Beispiel) sind nicht mehr verfügbar. Gibt es irgendwo anders eine Probe davon?
James Moberg
2
Schieberegler sind nicht gerade die einfachste oder schnellste Möglichkeit, eine genaue Zeit auszuwählen.
Mpen
@Mark Ich stimme Ihrer Meinung zu. Der einfachste Weg kann entweder eine Auswahlliste oder die Anzeige eines Taschenrechnerblocks sein, damit der Benutzer tippen kann.
Felix
8

Ich war mit keinem der vorgeschlagenen Zeitmesser zufrieden, also habe ich meine eigene mit Inspiration von Perifer's und der HTML5-Spezifikation erstellt:

http://github.com/gregersrygg/jquery.timeInput

Sie können entweder die neuen HTML5-Attribute für die Zeiteingabe (Schritt, Min, Max) verwenden oder ein Optionsobjekt verwenden:

<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<input type="time" name="myTime2" class="time-mm-hh" />

<script type="text/javascript">
    $("input[name='myTime']").timeInput(); // use default or html5 attributes
    $("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900}); // 15 min intervals from 6:00 am to 3:00 pm
</script>

Überprüft die Eingabe wie folgt:

  • Fügen Sie ":" ein, wenn es fehlt
  • Nicht gültige Zeit? Durch Leerzeichen ersetzen
  • Keine gültige Zeit nach Schritt? Auf / ab auf den nächsten Schritt runden

Die HTML5-Spezifikation erlaubt keine am / pm- oder lokalisierte Zeitsyntax, daher erlaubt sie nur das Format hh: mm. Sekunden sind gemäß Spezifikation erlaubt, aber ich habe es noch nicht implementiert.

Es ist sehr "Alpha", daher kann es zu Fehlern kommen. Sie können mir gerne Patches / Pull-Anfragen senden. Habe manuell in IE 6 & 8, FF, Chrome und Opera getestet (Neuestes stabiles unter Linux für letztere).

gregers
quelle
1
Haben Sie eine Demo zur Verfügung?
Mpen
Entschuldige Nein. Ich habe dieses Projekt seit 4 Jahren nicht mehr angerührt. Fühlen Sie sich frei, Pull-Anfragen zu senden :)
Gregers
6

Den Beitrag von jQuery-Ersteller John Resig dazu finden Sie hier: http://ejohn.org/blog/picking-time/ .

Sophie Alpert
quelle
4
Für den durchschnittlichen Benutzer ist die Mausgenauigkeit viel zu hoch. Es ist auch nicht sofort offensichtlich, wie man das Ding benutzt (obwohl er behauptet, es sei "intuitiv") - ich kann es nicht ansehen und weiß, wie es sich verhält, wenn ich mit der Maus über diese Ziffern fahre.
Mpen
4

Ich habe ClockPick verwendet .

Tvanfosson
quelle
Nicht schlecht, aber die Elementpositionierung ist ausgeschaltet.
Mpen
Dies führte zu einer faulen Seite, auf der ich nach einem Update von Flash gefragt wurde. Bitte überprüfen Sie den Link und aktualisieren Sie.
Lets0code
3

Die CSS-Galerie bietet eine Vielzahl von Zeitwählern. Guck mal.

Perifer Design 's Zeitauswahl ist ähnlich einer googeln

Alagu
quelle
1
Ah Perifer ist genau das, wonach ich suche, aber es scheint keine Validierung durchzuführen, dh ich kann "999999999" als Wert eingeben
Element
3

Für den Fall, dass jemand an einem anderen JavaScript-TimPicker interessiert ist, habe ich ein jQuery-Plugin entwickelt und gepflegt, das diese Aufgabe erfüllt. Es funktioniert so etwas wie EZ Time JS (obwohl ich es erst vor 5 Minuten wusste: D), sodass Benutzer die Zeit auf fast jede Art und Weise eingeben können, mit der sie sich wohl fühlen, und die Eingabe in ein gemeinsames Format konvertieren können.

Kasse der jQuery Timepicker Seite Optionen es in Aktion zu sehen.

Willington Vega
quelle
Die Demo ist kaputt (oder ich habe nicht verstanden, wie man sie benutzt!).
PhiLho
1

Sorry Leute .. vielleicht ist es ein bisschen spät .. Ich habe NoGray benutzt .. es ist cool ..


quelle
4
Es ist nie zu spät für jemanden (das Originalplakat ist nicht erforderlich), es nützlich zu finden. .. ... außer dass NoGray bereits von CMS erwähnt wird ...
Ehrfurcht
1

Ich habe jquery ui timepicker verwendet

Pryabov
quelle
Zu fehlerhaft. Stürzt den Browser ab, wenn etwa 10 bis 20 Steuerelemente vorhanden sind.
Nick Binnet
-1

NoGray ist eine schöne Augenweide, aber es gibt einige Überlegungen zur Benutzerfreundlichkeit. Erstens werden analoge Uhren immer dunkler, und jüngere Menschen haben manchmal Schwierigkeiten, sie zu lesen. Zweitens ist das Ziehen mit der Maus zu einer bestimmten Zeit etwas mühsam, genau wie bei den Zeitwählern, die einen Schieberegler verwenden. Drittens ist die Tastaturinteraktion für diesen Picker etwas sporadisch.

Weitere Informationen zur Zeitauswahl finden Sie im AJAX-Kalender-Widget Any + Time ™ Datepicker / Timepicker . Es ist vielleicht die am schnellsten und am einfachsten zu bedienende Zeitauswahl, da es einfache Schaltflächen verwendet, um bestimmte Zeiten schnell und einfach auszuwählen.

Ein interessanter Test für die Benutzerfreundlichkeit ist folgender: Wählen Sie eine ungerade Zeit (z. B. 22.32 Uhr) und sehen Sie dann, wie lange es dauert, diese Zeit mit verschiedenen Zeitwählern genau auszuwählen. Mit Any + Time ™ können Sie es wahrscheinlich schneller machen, als Sie die Zeit von Hand aufschreiben könnten - versuchen Sie einfach, einen anderen Picker zu finden, über den Sie das sagen können! Ganz zu schweigen davon, dass Any + Time ™ eine Vielzahl von Datums- / Zeitformaten, eine 12/24-Stunden-Uhr, eine vollständige Anpassung von CSS (oder jQuery UI) und sogar Zeitzonen unterstützt!

Andrew M. Andrews III
quelle
Netter Picker. Kostenlos für nichtkommerzielle Zwecke, aber Sie müssen den Entwickler bezüglich der Lizenzkosten für kommerzielle Projekte kontaktieren.
Andrew Lewis
6
Es ist einfach so, dass er der Entwickler ist ...
steve_c
Es ist nicht erforderlich, die 10er und 1er für die Minuten getrennt auszuwählen. Sie brauchen fast nie so viel Präzision. Kombinieren Sie die 10er und 1er und machen Sie 12 Reihen in 5-Minuten-Schritten. Es passt sich besser den Stunden an, ist schneller und für die meisten Anwendungsfälle ausreichend. Sie können auch den Cursor in eine Hand / einen Zeiger ändern, wenn Sie den Mauszeiger über diese Schaltflächen bewegen.
Mpen
Danke für die Rückmeldung! Ich arbeite an einer Ersatzbibliothek, die automatisch weniger Schaltflächen bereitstellt, wenn keine minutengenaue Auswahl erforderlich ist.
Andrew M. Andrews III
dass jede + Zeitseite Tausende von Text- und Codezeilen enthält, aber ich konnte keine einzige funktionierende Beispieldemo der Datums- / Zeitauswahl auf der Seite finden. Seufz ... man würde denken, dass eine Art Demo auf der Seite wäre irgendwo oben.
Heriberto Lugo