Qual è l'approccio migliore per ottenere l'input Data/Ora dall'utente?

Question

Questa è una ruota che è stata reinventata più e più volte nel corso degli anni.

Il problema: L'utente deve inserire un Data/Ora

considerazioni di base

• Vogliamo rendere il più semplice possibile per l'utente di inserire la data/ora desiderata
• Alcune applicazioni richiedono date storiche, alcune applicazioni chiamano solo per date future, alcune dovranno gestire entrambe
• Vogliamo impedire all'utente di immettere dati jibberish
• Vogliamo compilare automaticamente questo controllo nel modo più aggressivo possibile.
• Vogliamo che questo controllo sia il più riutilizzabile possibile.

soluzioni popolari includono:

• Testo Scatole
• caselle combinate
• calendari pop-out
• lato server e/o client-side di validazione
• Vari modi di allertare gli utenti sui cattivi dati

Ci sono una serie di soluzioni pronte per l'uso, ma sto cercando alcune informazioni più generali. Sono stati condotti studi di usabilità sui vari approcci di controllo della data-ora? C'è un "migliore" controllo data-ora là fuori? Esistono "dos e cosa non fare" consolidati?

---

questione connessa: Best GUI control(s) to describe a time range

Answer 1

Datemi un calendario per selezionare la data con il mouse. E fammi digitare la data con la tastiera. Accetta il maggior numero possibile di formati. Se ho bisogno di entrare 21 DICEMBRE 2012, farmi usare:

• 21 DICEMBRE 2012
• 21DEC2012
• 21 dicembre 2012
• 2012/12/21 (o 21/12/2012, scegliere uno, forse a seconda di quale paese sto usando il software)
• 12.212.012 (stesso frammento parentesi come sopra)
• Ecc

Qualunque cosa tu decida di fare per risolvere il problema di localizzazione, assicurati che sia ovvio quanto ti aspetti. Dammi un esempio o un modello con MMDDYYYY che posso digitare.

Si prega di non darmi scatole a discesa dove devo scorrere, soprattutto attraverso anni. Se sono vecchio, e sto entrando nel mio DOB, non ho abbastanza tempo da perdere nella mia vita per scorrere verso il basso fino alla parte inferiore della scatola. I box pull-down sono un buon modello da usare quando non so quali sono le opzioni, ma se è qualcosa che mi è familiare, come la mia data di nascita, i menu a discesa sono una seccatura.

Ora, input tempo WRT (Big pet peeve), non presumo che intendessi 3 am. Se inserisco 3 per il tempo, presumo volevo dire 3 pm. Fammi fare un lavoro extra per programmare qualcosa alle 3 del mattino. Se non ti senti a mio agio nell'assumerlo per il mio conto, almeno avvisami che ho programmato qualcosa per le 3 del mattino in modo da poterlo aggiustare ora invece che in seguito quando qualcuno sul mio elenco di eventi e-mail di invito e dice "Sei un idiota, tu programmato il nostro D & D Meetup per le 3 del mattino! "

Answer 2

una casella di testo con un'immagine-link ad un calendario pop-out sul lato è la mia scelta. Il meglio di entrambi i mondi.

Se si desidera qualcosa in più, è possibile utilizzare un parser data/ora in linguaggio naturale come Chronic http://chronic.rubyforge.org/.

Inoltre, non dimenticare gli utenti internazionali.

Answer 3

La mia preferenza è per un input di testo con un pulsante elipsis accanto ad essa:

Enter a date [  ] [...] 

L'elipsis sarebbe pop-up un calendario per popolare il metodo di scrittura, ma l'utente può digitare una data, se vogliono . La convalida deve essere eseguita quando si preme il pulsante "OK" per il modulo, in base alla mia esperienza, il tentativo di convalida della data su base carattere per carattere è destinato a fallire.

La convalida dovrebbe essere sofisticato e consentire espressioni come

"today" 
"Tomorrow" 
"23 Jan" 

etc.

Edit: In risposta ad alcuni commenti, si potrebbe fare di convalida quando la modifica del testo perde lo stato attivo (anche se io odio questo genere di cose), nel qual caso il contenuto di modifica potrebbe cambiare da "23 gennaio" a "23- 01-2009 "per indicare che l'espressione è stata compresa.

Answer 4

Suggerirei di consentire anche agli utenti che desiderano digitare piuttosto che fare clic su un controllo del calendario, quindi una combinazione di casella di testo + calendario popup funziona bene.

Abbiamo creato un controllo personalizzato con una tale combinazione. L'utente può digitare una data in una varietà di formati nella casella di testo o fare clic su un pulsante per far apparire il calendario.

Consentiamo tutti i tipi di input come "oggi", "wed" o "+2" (per dopodomani) e utilizzare le espressioni regolari per la maggior parte del lato client di convalida. Ovviamente facciamo anche convalida sul lato server.

Il controllo ha anche una casella di testo facoltativa per il tempo che può essere attivata o nascosta da una proprietà. Abbiamo ritenuto che fosse più facile separare la data dal momento. Per i tempi, consentiamo "9pm", "2100", "09:00" ecc.

Il controllo si riferisce a una data minima e massima, in modo che la data di nascita possa avere un intervallo da circa -100 anni a attuale anno, mentre la scadenza della carta di credito potrebbe variare dall'anno corrente a +5 anni, quindi utilizziamo i validatori di intervallo.

Answer 5

mi piacerebbe andare per tre alternative a seconda della situazione:

1. 2 caselle combinate. Un anno di quotazione + mese, un altro il giorno
2. 3 caselle combinate. Un anno di quotazione, un mese, un giorno
3. Visibile calendario/s e combo like this one from YUI

e credo che ci sono più opzioni da cui avrei scelto.

Answer 6

È necessario verificare i requisiti dell'interfaccia utente. Se si desidera solo il supporto abilitato per gli script, si può andare con qualsiasi panopolio di script ed eseguire con qualsiasi formato data/ora fornito in un campo nascosto.

Tuttavia, se avete bisogno della voce utente in una casella di testo, quindi sei di fronte a alcune decisioni:

• è il formato di data/ora rigida? per esempio. mm/gg/aaaa h: mm: solo formato ss?
• O liberamente definito, per consentire le voci di stile "oggi", "domani", "23 gennaio"?
• I formati saranno specifici della locale? per esempio. mm/gg/aaaa vs gg/mm/aaaa

I metodi di convalida dipendono dalle decisioni in merito ai requisiti.

Mi piace il plug-in jQuery date-picker. Consentirà l'output in formati specifici.

Answer 7

Un calendario che mostra più mesi in continuazione: http://www.cs.helsinki.fi/u/salaakso/patterns/Calendar-Strip.html

Answer 8

ho sempre trovato Google Calendar facile da usare in questo senso. Potresti certamente fare peggio di cercare di emularlo. La chiave è dare all'utente una grande flessibilità nel modo in cui inseriscono le informazioni.Ad esempio, posso selezionare un orario da un elenco a discesa o digitarlo manualmente e, quando digito, non sono obbligato a includere i due punti o la "m" in "pm".

Answer 9

Se stai andando per l'opzione casella combinata/elenco-casella assicurati di fare in modo che i mesi leggano "Jan", "Feb" ... "Dec" piuttosto che "1", "2" .. . "12".
È piuttosto fastidioso dover calcolare quale slot è il mese e che è il giorno in base agli intervalli dei valori.

Answer 10

Mi piace molto il modo in cui funziona il widget Data/Ora di QT4.

• È possibile inserire le date manualmente (digitare la data, nei formati comuni).
• È possibile utilizzare la rotella di scorrimento per modificare rapidamente i campi data/ora.
• Si dispone di un calendario espandibile con i mesi a discesa e le frecce avanti/indietro per i mesi. Puoi fare clic su giorni specifici e inserire l'anno manualmente o con una casella combinata (la rotella di scorrimento funziona anche qui).

Ecco un breve video (~ 7.5MB) che mostra come le opere di widget e ciò che alcune delle sue caratteristiche sono: Video Here

mi aspetterei qualsiasi applicazione sofisticata per avere alcune o tutte queste caratteristiche.

Essere in grado di inserire date relative (oggi, la settimana scorsa, 3 giorni fa) è utile, ma non sono sicuro di quanto sarebbe pratico, date domande standard come "Qual è la data di nascita?", O "Quando vorresti che X ti fosse inviato per email?".

Answer 11

Penso che la voce dell'intervallo di date su Google Calendar sia abbastanza buona. È possibile inserire tramite tastiera o mouse. L'unico cavillo sarebbe inserire le date per un anno diverso.

Puoi farlo abbastanza facilmente tramite la tastiera, ma dovrebbero avere una seconda serie di piccole frecce sul calendario per saltare un anno alla volta avanti o indietro usando il mouse.

Date Entry Example http://s5.tinypic.com/2qscw28.jpg

Time Entry Example http://s5.tinypic.com/3518f7q.jpg

EDIT: In risposta alla domanda, "Che cosa succede se si desidera pianificare un evento che va da 23:00 il Martedì fino a 01:00 il Mercoledì (diciamo un build giornaliera, per esempio ? Come si fa a passare il tempo oltre la mezzanotte? "

Se il tempo" a "lo spinge oltre la mezzanotte, passare la data" a "al giorno successivo. Sarebbe solo parte della logica aziendale del componente. Noterai nella seconda immagine sopra, il menu a discesa indica sia l'ora di fine che la durata dell'evento, che dovrebbe essere un suggerimento.

alt text http://s5.tinypic.com/15hlb8m.jpg

Se si tenta di mettere una data di fine antecedente alla data di inizio, è possibile evidenziare il colore dei campi di sfondo e/o mostrare un messaggio di errore durante il salvataggio.

alt text http://s5.tinypic.com/2yplphy.jpg

giocare su Google Calendar e vedere come si comporta.

Answer 12

è possibile utilizzare il plug-in cxcalendar. Sembra un altro datepicker. ma puoi selezionare l'anno e il mese in seleziona dopo aver fatto clic sul titolo del mese.