Selettore data / ora jQuery [chiuso]


245

Ho cercato un decente plug-in jQuery in grado di gestire sia le date che gli orari. L'interfaccia utente di base DatePickerè fantastica, ma sfortunatamente devo anche essere in grado di prendere tempo.

Ho trovato alcuni hack per il funzionamento di DatePicker con i tempi, ma sembrano tutti piuttosto ineleganti e Google non sta ottenendo nulla di carino.

Esiste un buon plug-in jQuery per la selezione di date e orari in un singolo controllo dell'interfaccia utente con un'interfaccia utilizzabile?


Sono abbastanza sicuro che il mio esempio sia un po 'meno confuso e più user friendly. Ci sono pro e contro di entrambi.
Michael Stone,

Risposte:


251

L'opzione di selezione DateTime di gran lunga più semplice e semplice è http://trentrichardson.com/examples/timepicker/ .

È un'estensione dell'interfaccia utente di jQuery Datepicker, quindi supporterà gli stessi temi e funziona in modo molto simile, sintassi simile, ecc. Questo dovrebbe essere impacchettato con l'interfaccia utente di jQuery imo.


3
Ho usato questo e lo adoro.
Sonny,

3
Mi piace questo, ma è ancora MOLTO buggy.
Alastair Pitts,

11
"MOLTO buggy"? Quasi. Lo uso nel codice di produzione e lo faccio da un po 'di tempo. È anche attivamente sviluppato.
Sonny,

7
@Sonny: se lo usi in produzione non ha alcuna influenza sul fatto che sia difettoso o meno. Potresti non aver visto i suoi bug perché non stai facendo le cose con esso che li espongono, come forse Alastair. D'altra parte, non ha offerto alcuna prova per il suo reclamo, quindi non sono propenso a prenderlo troppo sul serio ...
iconoclast

18
Il mio più grande problema con questo plugin è l'interfaccia utente: perché dovrei usare i cursori, quelli orizzontali in questo !, per inserire un tempo !? Mi sembra molto imbarazzante. Ho avuto così tante volte l'esperienza con i cursori in cui non riesco a ottenere il numero che desidero (ripetutamente andando un po 'sopra e poi un po' sotto) e finisco per digitarlo. Una tastiera è normalmente il modo più semplice per inserire un valore numerico preciso. Se si desidera un metodo di input visivo, un orologio è quello normale per tempo, non un cursore. Più difficile da implementare, ma in realtà potrebbe essere utile (purché sia ​​possibile anche l'immissione da tastiera).
iconoclasta il

46

@ David, grazie per la raccomandazione! @fluid_chelsea, ho appena rilasciato Any + Time (TM) versione 3.x che utilizza jQuery invece di Prototype e ha un'interfaccia molto migliorata, quindi spero che ora soddisfi le tue esigenze:

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

Eventuali problemi, per favore fatemi sapere tramite il link dei commenti sul mio sito Web!


6
Any + Time (TM) versione 4.x è ora disponibile! La nuova versione supporta TIME ZONES (trova QUELLO in qualsiasi altro selettore!) Così come i selettori / concatenamento jQuery, la facile rimozione (evitare perdite di memoria!) E molti altri miglioramenti. Per favore, fai un giro e, se hai problemi o suggerimenti, fammi sapere tramite la pagina dei commenti sul mio sito web.
Andrew M. Andrews III,

4
Any + Time sembra piuttosto elegante. Mi piace.
Zack Peterson,

Ho appena implementato AnyTime in pochi minuti su un'app Rails. Funziona perfettamente.
Gwyn Morfey,

Ho appena scelto il selettore AnyTime come selettore preferito per la mia app JSF! Grazie per l'ottimo prodotto, continuate così!
Arg,

Any + Time aggiunge un nuovo div nascosto per l'interfaccia utente per ogni input Any + Time (a differenza di datepicker dell'interfaccia utente jQUery che riutilizza l'interfaccia utente div nascosta) questo rende il downgrade delle prestazioni molto nel MSIE6 mal progettato. Quindi non usare Any + Time se devi supportare MSIE6!
Eduardo,

14

A mio avviso, le date e gli orari dovrebbero essere gestiti come due caselle di input separate affinché siano più utilizzabili ed efficienti per l'input dell'utente. Lasciare che l'utente inserisca una cosa alla volta è un buon principio, imho.

Uso l' interfaccia utente principale DatePicker e il seguente selettore del tempo.

Questo è ispirato a quello utilizzato da Google Calendar:

jQuery timePicker :
esempi: http://labs.perifer.se/timedatepicker/
project su github: https://github.com/perifer/timePicker

Ho trovato il migliore tra tutte le alternative. L'utente può inserire rapidamente, sembra pulito, è semplice e consente all'utente di inserire tempi specifici fino al minuto.

PS: Dal mio punto di vista: i cursori (usati da alcuni selettori di tempo alternativi) prendono troppi clic e richiedono la precisione del mouse dall'utente (il che rende l'input più lento).


Core UI DatePicker: jqueryui.com/demos/datepicker
Magne

Questo uccide i vantaggi del modello vincolante di C # MVC per quel campo
Serj Sagan,

13

La mia migliore esperienza con un datepicker è con AnyTime basato su prototipo . So che non è jQuery, ma potrebbe comunque valere la pena per te. Non conosco assolutamente alcun prototipo ed è ancora abbastanza facile da lavorare.

Un avvertimento che ho trovato: non è compatibile in avanti su alcuni browser. Cioè, non ha funzionato con una versione più recente del prototipo su Chrome.


1
Se potessi usare il prototipo questo non sarebbe un problema, purtroppo siamo bloccati con jQuery per questa app.
Chelsea,

7
Solo un aggiornamento: AnyTime 3 ora funziona con jQuery.
Jaxidian,

Non ci ho pensato per mesi e mesi. Ma il mio progetto personale voleva un po 'di aggiornamento ed ero quasi pronto a lanciare un po' di jquery. Ho pensato di sostituire il datepicker mentre ci sono, perché non avevo bisogno di tutte le funzionalità di Any + Time e ho pensato che avrei potuto anche andare su jQuery. E bam! Mi imbatto in questo. Tempismo eccezionale.
David Berger,

Bello, anche se il selettore dell'anno (facendo clic su <o>) è per me un clamore.
un programmatore l'

7

Solo per aggiungere alle informazioni qui, The Fluid Project ha un bel wiki-up che mostra un gran numero di selettori di data e / o ora qui .


4

Ho studiato questo di recente e non ho ancora trovato un selettore di date decente che includa anche un selettore di tempo decente . Quello che ho finito per usare era il fantastico DatePicker di eyecon , con due semplici menu a discesa per il tempo. Sono stato tentato di usare Timepickr.js , sembra un approccio davvero carino.


3

Ho riscontrato lo stesso problema. In realtà ho sviluppato il mio utilizzo della programmazione lato server, ma ho fatto una ricerca veloce per provare ad aiutarti e ho trovato questo.

Va bene, non ha guardato troppo alla fonte, ma sembra essere puramente JavaScript.

Dai un'occhiata:

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

Ecco il link alla pagina demo:

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

in bocca al lupo


Lo sto usando da alcuni anni. Sta diventando un po 'lungo nel dente ma funziona.
un programmatore l'

1

Questo è un codice che uso per consentire a un utente di selezionare un datetimepicker, impostare il datetime e fare in modo che l'altro datetimepicker aggiunga un minuto a quell'ora.

Ne avevo bisogno per un controllo terapeutico personalizzato ...

Comunque, ho pensato che potesse aiutare qualcun altro dato che non sono riuscito a trovare la risposta in nessun posto online ...

(almeno non una risposta completa)

Tieni presente che il 60000 ha aggiunto, aggiunge un minuto. (60 * 1000 millisecondi)

$('.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()));
        }
    });


1

Non jQuery, ma funziona bene per un calendario con l'ora: Selettore data e ora JavaScript .

Ho appena associato l'evento click per farlo apparire:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});

1
Aggiornato il collegamento: lo hanno spostato.
bigspotteddog,

Lo sto usando da alcuni anni, anche se l'ho invocato in modo diverso (quindi non riconoscendolo dal tuo codice). Sto migrando verso DatePicker di jquery, dal momento che la foresta pluviale sembra un po 'lunga nel dente.
un programmatore

0

Faccio una funzione in questo modo:

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

Quindi uso il datepicker dell'interfaccia utente jQuery in questo modo:

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

Quindi, ottengo il valore in questo modo: 2010-10-31 12:41:57


a volte dobbiamo determinare l'ora (non usando la funzione getTime)
bungdito

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.