jQuery Time Picker [geschlossen]


72

Ich möchte eine Texteingabe mit einer Zeit füllen, die der Benutzer in Intervallen von 15 Minuten auswählen kann. Ich weiß, dass es da draußen ein paar Plugins gibt. Ich habe mich gefragt, ob es ein "Industriestandard" -Plugin oder starke objektive Gründe gibt, in bestimmten Szenarien ein bestimmtes zu bevorzugen.


Vielen Dank für all Ihre Antworten, sie waren sehr hilfreich!
Bernardo

1
Abhängig von der benötigten Granularität können Sie einen Schieberegler verwenden. Schauen Sie sich kayak.com an und wie sie Schieberegler auf der Ergebnisseite verwenden, um den Zeitbereich festzulegen. Ich habe dies verwendet, um mit einem Zeitbereich zu arbeiten, aber es könnte auch gut funktionieren, nur um eine Zeit einzustellen.
Kevin

Antworten:


86

Ich fand, dass dieses Plugin ( Github-Repository ) das andere erwähnte übertrifft . Es ahmt den Zeitmesser von Google Kalender nach.


7
+1 Es herrscht gesunder Menschenverstand. Ich würde gerne sehen, wie der OP seine Meinung ändert und diese Antwort akzeptiert.
Kev

2
Dieses Plugin behandelt ungültige Einträge überhaupt nicht gut. Wenn ich "abc" eingebe, wird es "2:00 AM".
RMorrisey

3
Der Link von this pluginist unterbrochen. Könnten Sie es reparieren / entfernen?
Michel Ayres

35

Ich habe eine Menge Zeitmesser ausprobiert und war nicht zufrieden, also habe ich [noch] einen anderen geschrieben. Ich denke es funktioniert gut. Außerdem ist es vom Datepicker inspiriert, sodass es wie Standard-jQuery-UI-Inhalte aussieht.

Die Standardminuteninkremente liegen bei 5 und können in den Optionen auf 15 eingestellt werden.

http://fgelinas.com/code/timepicker


1
Netter Francois +1 Ich habe mir Demos angesehen und könnte bald damit spielen!
Jwwishart

1
Ich mag Francois Plugin wirklich. 1) es ermöglicht die manuelle Eingabe für @ Kevs Power-User 2) es erfordert kein Scrollen 3) Menschen betrachten die Zeit als morgens / abends, dann Stunden und dann Minuten (zunehmende Spezifität), nicht als Kontinuum von Stunden und Minuten ab Mitternacht . So präsentiert Francois Ihren Benutzern Zeit.
SooDesuNe

2
Um das tote Pferd zu besiegen, sind Zeitauswahl-Plugins, bei denen Sie durch eine Liste von Stunden / Minuten (1:15, 1:30, 1:45 usw.) scrollen müssen, genau die gleichen wie bei einer Datumsauswahl, bei der Sie einen Bildlauf durchführen müssen ein Dropdown von Tagen / Monaten (1-Jan, 2-Jan, 3-Jan). Ich habe noch nie jemanden schlagen sehen, der das für eine gute Idee hielt.
SooDesuNe

1
Vielen Dank, dass Sie dieses Plugin erstellt haben - es ist das benutzerfreundlichste, das ich je gesehen habe, und Endbenutzer haben mir mitgeteilt, dass sie es sehr einfach zu bedienen finden.
Matt

2
Vielen Dank, dass Sie sich die Zeit genommen haben, eine jQuery UI-freundliche Zeitauswahl zu erstellen.
Jrummell

20

Mein Rat wäre, dies nicht zu tun. Ich finde es schon schlimm genug, gezwungen zu sein, ein Kalendersteuerelement zu verwenden, um nur ein Datum einzugeben, insbesondere wenn ich nicht die Möglichkeit habe, ein Datum einzugeben, was ich viel schneller tun kann, als durch ein weiteres verrücktes Steuerelement zu navigieren.

Time Picker bringen diese Art von UI-Fetisch auf ein neues Extrem. Erlauben Sie Ihren Benutzern, entweder die Uhrzeit einzugeben oder nur ein paar Dropdown-Felder für Stunden und Minuten zu verwenden. Selbst Dropdown-Listen ermöglichen es einem Benutzer, nur die Zeit einzugeben. Der Zeitmesser in Shog9s Antwort ist alles sehr schön anzusehen, aber unglaublich umständlich zu bedienen. Wenn ich ein Endbenutzer war, der eine Dateneingabe-App verwenden musste und eine solche Steuerung auf der Seite hatte, wird dies mich nur verlangsamen und mich dazu bringen, die Hände der Entwickler abzuschneiden. :) :)

Denken Sie zuerst über die Benutzerfreundlichkeit nach, bevor Sie sehen, wie schick die App aussieht.

Nur meine bescheidene Meinung.


2
Wenn Sie beide Optionen angeben, habe ich kein Problem, solange Sie Benutzer nicht dazu zwingen, sich durch eine Datums- / Zeitauswahl zu arbeiten, wenn es ein perfektes Textfeld gibt, in das sie Datum und Uhrzeit eingeben können. Dies gilt insbesondere dann, wenn es sich um eine Seite handelt, die immer wieder von denselben Benutzertypen verwendet wird, z. B. von Dateneingabe- oder Callcenter-Mitarbeitern.
Kev

27
-1, weil die Frage für einen Zeitmesser ist und die akzeptierte Antwort "nicht" ist. Ich bin mir ziemlich sicher, dass es einige Plugins gibt, die manuelle Eingabe und UI-Klickbarkeit ermöglichen.
Dotjoe

3
@dotjoe - wie wäre es, wenn Sie eines dieser Beispiele zitieren und eines, das nicht mit einer Reihe von Usability-Problemen verbunden ist.
Kev

11
-1, da ein Timepicker bei ordnungsgemäßer Verwendung verhindern kann, dass der Benutzer eine Zeit im falschen Format eingibt, was zu Müllergebnissen führen kann. Bei der Freiform-Eingabe müssten Sie die Eingabe nach der Eingabe validieren und sich möglicherweise beschweren, wenn die Eingabe nicht dem erforderlichen Format entspricht. Für eine optimale Benutzerfreundlichkeit sollten Sie schlechte Eingaben vermeiden, anstatt sich darüber zu beschweren (niemand möchte erfahren, dass er etwas falsch gemacht hat), und dabei die am wenigsten aufdringliche Methode verwenden.
Andrew M. Andrews III

4
@ Kevin, Hochgeschwindigkeits-Dateneingabemitarbeiter sind Power-User, die keine Eingabehilfe benötigen. Kettensägen, die von Holzfällern verwendet werden, verfügen nicht über alle Sicherheitsmerkmale, die Verbrauchermodelle bieten. Trotzdem habe ich Gehaltsschecks überprüft, die von Hochgeschwindigkeits-Dateneingabemitarbeitern eingegeben wurden, und jede Charge hatte mindestens einen Gehaltsscheck, der vollständig unleserlich war, weil der Bediener seine Finger auf den falschen Schlüsseln stationiert hatte und sich nicht einmal die Mühe machte, dies zu überprüfen was sie tippten.
Andrew M. Andrews III

10

Es ist nicht jQuery ... aber ich habe festgestellt, dass ein Dropdown-Menü mit einer Liste von Zeitintervallen von 15 Minuten, 8:00 Uhr, 8:15 Uhr, 8:30 Uhr usw. für den Benutzer äußerst einfach zu interagieren ist.

Ich bin mir nicht sicher, ob Sie wirklich eine jQuery-Methode benötigen ... dies könnte übertrieben sein. Nur eine Meinung, die auf meiner persönlichen Erfahrung mit echten Benutzern und der Entwicklung von Geschäftsanwendungen basiert .


8

Wenn Sie daran interessiert sind, einen guten Zeitparser zu verwenden und dem Benutzer die Eingabe einer Vielzahl gültiger Zeitzeichenfolgen (8:00 Uhr, 8:00 Uhr, 8:00 Uhr, 08:00 Uhr usw.) zu ermöglichen, besuchen Sie http: //www.datejs .com / .

Hier ist der Abfragecode, mit dem ich arbeite.

$('.time').blur(function (e) {
    var val = $(this).val();
    if (!isNaN(val))
        // add minutes to numeric value otherwise it will be interpreted as a date
        val = val + ':00'; 
    var dt = Date.parse(val);
    $(this).val(dt.toString('h:mm tt'))
});

2
Zucker scheint eine interessante Alternative zu DateJS zu sein. Es verfügt über eine Reihe von Datums- / Zeitmethoden, enthält jedoch auch viele andere JS-Verbesserungen.
Brian

5

Ich denke, jede Antwort außer der von Kev ist subjektiv. Ich habe Zehntel der Time-Picker-JQuery-Plug-Ins im Internet gesehen, und die meisten waren nutzlose, zeitaufwändige Gimmicks. Wenn Sie jedoch bereits den Standard-Jquery-Datepicker verwenden, ist dieses Plug-In geeignet.


4
-1 aus so vielen Gründen kann ich nicht zählen. Erstens - Kevs Antwort ist ebenfalls völlig subjektiv. Er gibt nur eine Meinung ab. Zweitens - Ihre Antwort ist völlig subjektiv. Drittens ist dieses Time Picker-Plugin das einzige, was ich vom Standpunkt der Benutzeroberfläche aus schlechter gesehen habe als das von Shog9 empfohlene. Schließlich sollte Ihre Antwort eine Antwort sein, kein Kommentar zu anderen Antworten. Dafür sind Kommentare da. Ich denke, ich kann die Probleme mit der Antwort zählen - es gibt vier.
Charles Boyung

Danke für die Beobachtungen. Sie haben in fast allen Punkten Recht :), aber ich habe nicht gesagt, dass das von mir empfohlene Plug-In das Beste ist, nur dass es sehr gut zum JQuery-Datepicker passt ... vielleicht hätte ich es anders formulieren sollen .
S Bogdan

4

Schauen Sie sich Maxime Haineaults jQuery.timepicker an . Ziemlich cool, IMHO ...


19
cool, aber schrecklich zu bedienen
Espen

4
Ich würde nicht damit einverstanden sein, dass es cool ist und @Espen zustimmen, dass es schrecklich wäre, es zu benutzen.
Charles Boyung

6
Jedes UI-Dateneingabe-Widget, das den Wert durch einfaches Bewegen der Maus über das Steuerelement ändert, ist eine schlechte Idee. Es macht es viel einfacher, den Eingabewert versehentlich zu ändern.
Chris Miller

Manuelle Eingaben werden so schlecht wie möglich behandelt (indem sie ignoriert werden).
Mahmoodvcs

4

Das beste, das ich je benutzt habe, ist das von Telerik.

http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

Es ist unauffällig, wenn der Benutzer nur die Uhrzeit eingibt oder auf das Uhrensymbol klickt, um aus einer Liste auszuwählen. Grundsätzlich nur eine ästhetisch ansprechendere Methode zur Verwendung bearbeitbarer Dropdowns.


Schade, dass es keine Version für asp.net mvc gibt
Adrian Grigore


Und ich arbeite nicht für Telerik. Ich mag einige Sachen, andere Sachen, die ich verabscheue. Zum Beispiel RadWindow. Bleh.
Merritt

mache ich etwas falsch oder verbietet dieser Timepicker wirklich die Eingabe einer Zeit zwischen 23:01 Uhr und Mitternacht?
Martha




1

Ich habe eines geschrieben, das auf dem von Jim erwähnten Plugin basiert (funktioniert wie Google Kalender Time Picker), aber es funktioniert mit jquery ui autocomplete. Es ist viel stabiler als das oben erwähnte Plugin. Ich hatte Probleme damit, mich auf der Seite zu positionieren. Das Plugin verwendet ein Array, einen Zeitbereich und Intervalle oder eine Ajax-Quelle ... damit Sie es nach Herzenslust anpassen können.


klingt interessant. Haben Sie eine Demo-Site für das Plugin?
Adrian Grigore

Ich noch nicht, aber ich benutze es auf meiner Website. Sie können zu snirk.snirk.com gehen und auf einen nicht geplanten Block klicken. Es wird ein Dialogfeld angezeigt, in dem das Plugin (die Startzeit) verwendet wird.
Hazmat

1

Obwohl es keinen Standard gibt, habe ich ein jQuery-Plugin von Keith Wood verwendet . Im Gegensatz zu einigen anderen wird dies zu einem Textfeld (das Sie noch eingeben können, während Sie noch eine Validierung durchführen) und kann auch mit einer Maus verwendet werden, wenn Sie dazu neigen.



1

Ich konnte kein Plugin finden, das das tat, was ich wollte (dh mehrspaltige automatische Vervollständigung kombiniert mit zeitlicher Eingabemaskierung), also schrieb ich MenuOptions

Wie es aussieht Geben Sie hier die Bildbeschreibung ein


0

Das AJAX-Kalender-Widget Any + Time ™ DatePicker / TimePicker ermöglicht die Zeitauswahl , die bei Verwendung der Maus ungefähr so ​​schnell wie das Eingeben von Hand ist, aber den zusätzlichen Vorteil der Fehlervermeidung bietet. Die Zeit kann beliebig formatiert werden. Es unterstützt auch die Tastaturmanipulation, obwohl der Tastaturzugriff zwar nicht so schnell ist wie die Maus oder das Tippen ... aber auch hier wird garantiert, dass der Wert im erforderlichen Format vorliegt. Es ist auch einfach anzupassen und kann auch Daten verarbeiten.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.