jQuery Datums- / Zeitauswahl [geschlossen]

245

Ich habe mich nach einem anständigen jQuery-Plugin umgesehen, das sowohl Datum als auch Uhrzeit verarbeiten kann. Die Kern-Benutzeroberfläche DatePickerist großartig, aber leider muss ich mir auch Zeit nehmen können.

Ich habe ein paar Hacks gefunden, mit denen der DatePicker mit der Zeit arbeiten kann, aber alle scheinen ziemlich unelegant zu sein, und Google zeigt nichts Nettes.

Gibt es ein gutes jQuery-Plugin zum Auswählen von Datum und Uhrzeit in einem einzelnen UI-Steuerelement mit einer verwendbaren Oberfläche?

Chelsea
quelle
Ich bin mir ziemlich sicher, dass mein Beispiel etwas weniger verwirrend und benutzerfreundlicher ist. Beides hat Vor- und Nachteile.
Michael Stone

Antworten:

251

Die mit Abstand schönste und einfachste DateTime-Auswahloption ist http://trentrichardson.com/examples/timepicker/ .

Es ist eine Erweiterung des jQuery UI Datepicker, sodass es dieselben Themen unterstützt und auf die gleiche Weise funktioniert, ähnliche Syntax usw. Dies sollte mit dem jQuery UI imo gepackt werden.

Xordon
quelle
3
Ich habe dieses benutzt und ich liebe es.
Sonny
3
Ich mag das, aber es ist immer noch sehr fehlerhaft.
Alastair Pitts
11
"SEHR Buggy"? Kaum. Ich benutze es im Produktionscode und habe es schon eine Weile. Es ist auch aktiv entwickelt.
Sonny
7
@Sonny: Ob Sie es in der Produktion verwenden, hat keinen Einfluss darauf, ob es fehlerhaft ist oder nicht. Möglicherweise haben Sie die Fehler einfach nicht gesehen, weil Sie nicht die Dinge damit tun, die sie aufdecken, was Alastair vielleicht ist. Andererseits hat er keine Beweise für seine Behauptung vorgelegt, daher bin ich nicht geneigt, sie zu ernst zu nehmen ...
Bilderstürmer
18
Mein größtes Problem mit diesem Plugin ist die Benutzeroberfläche: Warum sollte ich horizontale Schieberegler verwenden, um eine Zeit einzugeben? Es sieht und fühlt sich für mich sehr unangenehm an. Ich habe so oft Erfahrungen mit Schiebereglern gemacht, bei denen ich es nicht auf die gewünschte Zahl bringen kann (immer wieder ein wenig über und ein wenig unter), und am Ende schreibe ich es. Eine Tastatur ist normalerweise die einfachste Möglichkeit, einen genauen numerischen Wert einzugeben. Wenn Sie eine visuelle Eingabemethode wünschen, ist eine Uhr die normale für die Zeit und kein Schieberegler. Schwieriger zu implementieren, kann aber tatsächlich nützlich sein (solange auch Tastatureingaben möglich sind).
Bilderstürmer
46

@ David, danke für die Empfehlung! @fluid_chelsea, ich habe gerade Any + Time (TM) Version 3.x veröffentlicht, die jQuery anstelle von Prototype verwendet und eine stark verbesserte Benutzeroberfläche hat. Ich hoffe, dass es jetzt Ihren Anforderungen entspricht:

http://www.ama3.com/anytime/

Bei Problemen teilen Sie mir dies bitte über den Kommentar-Link auf meiner Website mit!

Andrew M. Andrews III
quelle
6
Jede + Time (TM) Version 4.x ist jetzt verfügbar! Die neue Version unterstützt TIME ZONES (finden Sie DAS in jedem anderen Picker!) Sowie jQuery-Selektoren / Verkettung, einfaches Entfernen (vermeiden Sie Speicherlecks!) Und viele andere Verbesserungen. Bitte probieren Sie es aus und wenn Sie Probleme oder Vorschläge haben, lassen Sie es mich über die Kommentarseite auf meiner Website wissen.
Andrew M. Andrews III
4
Any + Time sieht ziemlich schick aus. Ich mag das.
Zack Peterson
Einfach AnyTime in wenigen Minuten in einer Rails-App implementiert. Funktioniert perfekt.
Gwyn Morfey
Ich habe gerade den AnyTime-Picker als Picker meiner Wahl für meine JSF-App ausgewählt! Danke für das schöne Produkt, macht weiter so!
Arg
Any + Time fügt für jede Any + Time-Eingabe ein neues verstecktes Div für die Benutzeroberfläche hinzu (im Gegensatz zu jQUery UI Datepicker, der die versteckte Div-Benutzeroberfläche wiederverwendet). Dies führt zu einer erheblichen Leistungsverschlechterung im schlecht gestalteten MSIE6. Verwenden Sie also nicht Any + Time, wenn Sie MSIE6 unterstützen müssen!
Eduardo
14

Meiner Ansicht nach sollten Datum und Uhrzeit als zwei separate Eingabefelder behandelt werden, damit der Benutzer sie am besten verwenden und effizient eingeben kann. Lassen Sie den Benutzer eine Sache nach der anderen eingeben, ist ein gutes Prinzip, imho.

Ich verwende den Core UI DatePicker und die folgende Zeitauswahl .

Dieser ist inspiriert von dem, den Google Kalender verwendet:

jQuery timePicker :
Beispiele: http://labs.perifer.se/timedatepicker/
Projekt auf Github: https://github.com/perifer/timePicker

Ich fand es die beste unter allen Alternativen. Der Benutzer kann schnell eingeben, es sieht sauber aus, ist einfach und ermöglicht es dem Benutzer, bestimmte Zeiten minutengenau einzugeben.

PS: Meiner Ansicht nach: Schieberegler (die von einigen alternativen Zeitwählern verwendet werden) erfordern zu viele Klicks und erfordern vom Benutzer Mausgenauigkeit (was die Eingabe verlangsamt).

Magne
quelle
Core UI DatePicker: jqueryui.com/demos/datepicker
Magne
Dies macht die Modellbindungsvorteile von C # MVC für dieses Feld
zunichte
13

Meine beste Erfahrung mit einem Datepicker mache ich mit dem prototypbasierten AnyTime . Ich weiß, dass dies nicht jQuery ist, aber es kann den Kompromiss für Sie wert sein. Ich kenne absolut keinen Prototyp und es ist immer noch einfach genug, damit zu arbeiten.

Eine Einschränkung, die ich gefunden habe: Es ist in einigen Browsern nicht vorwärtskompatibel. Das heißt, es funktionierte nicht mit einer neueren Version des Prototyps auf Chrome.

David Berger
quelle
1
Wenn ich einen Prototyp verwenden könnte, wäre dies kein Problem. Leider bleiben wir bei jQuery für diese App.
Chelsea
7
Nur ein Update - AnyTime 3 funktioniert jetzt mit jQuery.
Jaxidian
Ich habe monatelang nicht darüber nachgedacht. Aber mein persönliches Projekt wollte etwas aktualisiert werden und ich war gerade bereit, eine Frage zu stellen. Ich dachte, ich würde den Datepicker ersetzen, während ich dabei bin, weil ich nicht alle Funktionen von Any + Time brauchte und dachte, ich könnte genauso gut alle jQuery verwenden. Und bam! Ich bin darauf gestoßen. Tolles Timing.
David Berger
Schön, obwohl die Jahresauswahl (Klicken auf <oder>) für mich klobig ist.
ein Kodierer
7

Um die Informationen hier zu ergänzen, hat The Fluid Project eine nette Wiki-Zusammenfassung, die eine große Anzahl von Datums- und / oder Zeitwählern hier zusammenfasst .

Jaxidian
quelle
4

Ich habe dies erst kürzlich recherchiert und noch keinen anständigen Datums-Picker gefunden, der auch einen anständigen Zeit-Picker enthält. Am Ende habe ich den fantastischen DatePicker von eyecon verwendet , mit zwei einfachen Dropdowns für die Zeit. Ich war versucht, Timepickr.js zu verwenden , sieht aber nach einem wirklich guten Ansatz aus.

täuschen
quelle
3

Ich bin auf dasselbe Problem gestoßen. Ich habe meine Verwendung der serverseitigen Programmierung entwickelt, aber ich habe eine schnelle Suche durchgeführt, um Ihnen zu helfen, und dies gefunden.

Scheint in Ordnung zu sein, hat nicht zu viel auf die Quelle geschaut, scheint aber nur JavaScript zu sein.

Schauen Sie:

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

Hier ist der Link zur Demoseite:

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

Viel Glück

Michael Stone
quelle
Ich benutze das seit ein paar Jahren. Es wird ein bisschen lang im Zahn, aber es funktioniert.
Ein Kodierer
1

Dies ist ein Code, den ich verwende, damit ein Benutzer einen DatetimePicker auswählt, die Datetime festlegt und der andere DatetimePicker dieser Zeit eine Minute hinzufügt.

Ich brauchte dies für eine benutzerdefinierte Medikamentenkontrolle ....

Wie auch immer, dachte, es könnte jemand anderem helfen, da ich die Antwort nirgendwo online finden konnte ...

(zumindest keine vollständige Antwort)

Denken Sie daran, dass der 60000 hinzugefügt wird, fügt eine Minute hinzu. (60 * 1000 Millisekunden)

$('.frdtPicker').datetimepicker({
        onClose: function(dateText, inst) {
            var endDateTextBox = $('.todtPicker');
            if (endDateTextBox.val() != '') {
                var testStartDate = new Date(dateText);
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate) {

                    var testStartDate = new Date(dateText).getTime() + 60000;
                    var testStartDate2 = new Date(testStartDate); 

                    endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
                }
            }
            else {
                var testStartDate = new Date(dateText).getTime() + 60000;
                var testStartDate2 = new Date(testStartDate);
                endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
            }
            $('.frdtPicker').val(dateText); //endDateTextBox.val());

        },
        onSelect: function(selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });
Carlos Martini
quelle
1

Schauen Sie sich das folgende JavaScript-Plugin an.

Javascript Kalender mit Datum und Uhrzeit

Ich habe es so einfach wie möglich gemacht. aber es ist noch in den frühen Tagen. Lassen Sie mich das Feedback wissen, damit ich es verbessern kann.

Joe
quelle
1

Nicht jQuery, aber es funktioniert gut für einen Kalender mit Zeit: JavaScript Date Time Picker .

Ich habe gerade das Klickereignis gebunden, um es zu öffnen:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
bigspotteddog
quelle
1
Der Link wurde aktualisiert - sie haben ihn verschoben.
Bigspotteddog
Ich benutze das seit ein paar Jahren, obwohl ich es anders aufgerufen habe (daher nicht aus Ihrem Code zu erkennen). Ich bin zu Datequicker von jquery migriert, da der Regenwald etwas lang in den Zahn schaut.
ein Kodierer
0

Ich mache eine Funktion wie diese:

function getTime()
{
    var date_obj = new Date();
    var date_obj_hours = date_obj.getHours();
    var date_obj_mins = date_obj.getMinutes();
    var date_obj_second = date_obj.getSeconds();

    var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
    return date_obj_time;
}

Dann benutze ich den jQuery UI Datepicker wie folgt:

$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );

Ich erhalte also den folgenden Wert: 2010-10-31 12:41:57

dhaniBinZain
quelle
Manchmal müssen wir die Zeit bestimmen (ohne die Funktion getTime zu verwenden)
bungdito