¿Cuál es el mejor enfoque para obtener la entrada de fecha/hora del usuario?

Question

Esta es una rueda que se ha reinventado una y otra vez a lo largo de los años.

El Problema: El usuario tiene que introducir una fecha/hora

consideraciones básicas

• Queremos que sea lo más fácil posible para que el usuario introduzca la fecha/hora deseada
• Algunas aplicaciones requieren fechas históricas, algunas aplicaciones solo requieren fechas futuras, algunas necesitarán manejar ambas
• Queremos evitar que el usuario ingrese datos jibberish
• Queremos rellenar automáticamente este control de la forma más agresiva posible.
• Queremos que este control sea lo más reutilizable posible.

soluciones más populares son:

• cuadros de texto
• cuadros combinados
• pop-out calendarios
• del lado del servidor y/o del lado del cliente de validación
• Varias formas de alertar los usuarios sobre datos incorrectos

Hay una gran cantidad de soluciones listas para consumir, pero estoy buscando información más general. ¿Se han realizado estudios de usabilidad en los diferentes enfoques de control de fecha y hora? ¿Hay un "mejor" control de fecha y hora? ¿Hay algún "Qué hacer y qué no hacer" bien establecido?

---

pregunta relacionada: Best GUI control(s) to describe a time range

Answer 1

Dame un calendario para seleccionar la fecha con un mouse. Y déjame escribir la fecha con el teclado. Acepta tantos formatos como sea posible. Si necesito para entrar en 21 de diciembre de 2012, me deja utilizar:

• Dic 21 de 2012
• 21DEC2012
• de diciembre de 2012 21 de
• 12/21/2012 (o 21/12/2012, pick uno, tal vez dependiendo de qué país estoy usando el software)
• 12212012 (mismo fragmento paréntesis que el anterior)
• Etc.

Independientemente de lo que decida hacer para resolver el problema de localización, asegúrese de que sea obvio lo que espera. Dame un ejemplo, o una plantilla con MMDDYYYY que pueda escribir más.

Por favor no me des cajas desplegables donde tengo que desplazarme, especialmente a través de los años. Si soy viejo y estoy ingresando mi fecha de nacimiento, no tengo suficiente tiempo en mi vida para desplazarme hasta la parte inferior de su cuadro desplegable. Los cuadros desplegables son un buen patrón para usar cuando no sé cuáles son las opciones, pero si es algo con lo que estoy familiarizado, como mi fecha de nacimiento, los menús desplegables son una molestia.

Ahora, las entradas de hora WRT (Big Pet Peeve), no asumen que quise decir 3 am. Si ingreso 3 por el tiempo, supongo que quise decir 3 pm. Haz que haga un trabajo extra para programar algo a las 3 a. M. Si no se siente cómodo asumiendo eso en mi nombre, al menos avísenme que programé algo para las 3 de la mañana para poder arreglarlo ahora en lugar de más tarde cuando alguien de mi lista de invitaciones de eventos envíe correos electrónicos y diga "Usted idiota, usted programado nuestro D Meet Meetup D & D para las 3 am! "

Answer 2

un cuadro de texto con una imagen-enlace a un calendario pop-out en el lado es mi elección. Lo mejor de ambos mundos.

Si quieres algo extra, puedes dejar que un analizador de fecha/hora del lenguaje natural como Chronic http://chronic.rubyforge.org/ lo condimente.

Además, no se olvide de los usuarios internacionales.

Answer 3

Mi preferencia es para una entrada de texto con un botón de elipsis al lado:

Enter a date [  ] [...] 

La elipsis se mostrará un calendario para poblar la entrada de texto, pero el usuario puede escribir en una fecha si quieren . La validación se debe hacer cuando se presiona el botón "Aceptar" para el formulario: tratar de hacer la validación de fecha carácter por carácter está condenado, según mi experiencia.

La validación debe ser sofisticado y permitir expresiones como

"today" 
"Tomorrow" 
"23 Jan" 

etc.

Editar: En respuesta a algunos comentarios, se podría hacer la validación cuando la edición de texto pierde el foco (aunque no me gusta ese tipo de cosas), en cuyo caso el contenido de edición podría cambiar de "23 ene" a "23- 01-2009 "para indicar que se entendió la exprsión.

Answer 4

Sugiero que también permita a los usuarios que les gusta escribir en lugar de hacer clic en un control de calendario, por lo que una combinación de cuadro de texto + calendario emergente funciona bien.

Creamos un control personalizado con esa combinación. El usuario puede escribir una fecha en una variedad de formatos en el cuadro de texto o hacer clic en un botón para abrir el calendario.

Permitimos todo tipo de entradas como "hoy", "mié" o "+2" (para pasado mañana) y usamos expresiones regulares para la mayoría del lado del cliente de validación. También hacemos la validación del lado del servidor, por supuesto.

El control también tiene un cuadro de texto opcional para el tiempo que se puede habilitar u ocultar por una propiedad. Sentimos que era más fácil separar la fecha del tiempo. Para los tiempos, permitimos "9pm", "2100", "09:00", etc.

El control abastece una fecha mínima y máxima, por lo que la fecha de nacimiento puede tener un rango de digamos -100 años a la actual año, mientras que la caducidad de la tarjeta de crédito puede variar desde el año actual a +5 años, por lo que usamos validadores de rango.

Answer 5

me gustaría ir por tres alternativas dependiendo de la situación:

1. 2 cuadros combinados. Un listado año + mes, otro el día
2. 3 cuadros combinados. Un años de la lista, un mes, un día
3. visible calendario/s y combos like this one from YUI

y creo que hay más opciones de las que yo elegiría.

Answer 6

Debe verificar sus requisitos de IU. Si solo desea compatibilidad con scripts habilitados, puede ir con cualquiera de su grupo de scripts y ejecutarlos con el formato de fecha/hora que proporcionen en un campo oculto.

Sin embargo, si necesita la entrada de usuario en un cuadro de texto, a continuación, se enfrenta a algunas decisiones:

• es el formato de fecha/hora rígida? p.ej. mm/dd/aaa hh: formato mm: ss solamente?
• ¿O definido vagamente, para permitir las entradas de estilo "hoy", "mañana", "23 de enero"?
• ¿Los formatos serán específicos de la configuración regional? p.ej. mm/dd/aaaa vs. dd/mm/aaaa

Los métodos de validación dependen de sus decisiones sobre los requisitos.

Me gusta el plugin jQuery date-picker. Permitirá salida en formatos específicos.

Answer 7

Un calendario que muestra varios meses de forma continua: http://www.cs.helsinki.fi/u/salaakso/patterns/Calendar-Strip.html

Answer 8

siempre he encontrado Google Calendar fácil de usar a este respecto. Sin duda podrías hacer algo peor que tratar de emularlo. La clave es darle al usuario mucha flexibilidad sobre cómo ingresan la información.Por ejemplo, puedo seleccionar una hora de una lista desplegable o escribirla manualmente, y cuando escribo, no es necesario que incluya los dos puntos o la "m" en "pm".

Answer 9

Si opta por la opción combo-box/list-box, asegúrese de hacer que los meses sean "Jan", "Feb" ... "Dec" en lugar de "1", "2" ... . "12".
Es bastante molesto tener que averiguar qué ranura es el mes y cuál es el día de acuerdo con los rangos de los valores.

Answer 10

Me gusta mucho el funcionamiento del widget Fecha/Hora de QT4.

• Puede introducir manualmente las fechas (tipo de la fecha, en formatos comunes).
• Puede usar su rueda de desplazamiento para cambiar rápidamente los campos de fecha/hora.
• Tiene un calendario expandible que tiene meses desplegables y flechas hacia adelante/hacia atrás para los meses. Puede hacer clic en días específicos e ingresar el año manualmente, o con un cuadro combinado (la rueda de desplazamiento también funciona aquí).

Aquí está un vídeo de corta duración (~ 7,5 MB) que muestra cómo las obras de widgets y lo que algunas de sus características son: Video Here

yo esperaría cualquier aplicación sofisticada que tiene algunas o todas estas características.

Ser útil para introducir fechas relativas (hoy, la semana pasada, 3 días) es útil, pero no estoy seguro de lo práctico que sería, dadas preguntas estándar como "¿Cuál es su fecha de nacimiento?", O "¿Cuándo le gustaría que X le enviara un correo electrónico?".

Answer 11

creo que la entrada rango de fechas en Google Calendar es bastante bueno. Puede ingresar por teclado o por mouse. La única objeción sería ingresar fechas para un año diferente.

usted puede hacerlo con bastante facilidad a través del teclado, pero deberían tener un segundo conjunto de pequeñas flechas en el calendario para saltar de un año a la vez hacia atrás o hacia delante con el ratón.

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

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

EDIT: En respuesta a la pregunta: "¿Qué pasa si desea programar un evento que va desde 23:00 del martes hasta las 1 am el miércoles (por ejemplo una acumulación diaria, por ejemplo,)? ¿Cómo envolver el tiempo en la medianoche? "

Si el" a "tiempo lo empuja más de la medianoche, luego la fecha" hasta "al día siguiente. Eso solo sería parte de la lógica comercial del componente. Notarás en la segunda imagen de arriba, el menú desplegable indica tanto el tiempo de finalización como la duración del evento, que debería ser una pista.

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

Si tratas de poner una fecha de finalización anterior a la fecha de inicio, se puede resaltar el color de fondo de los campos y/o mostrar un mensaje de error al guardar.

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

Juega un poco en Google Calendar y ver cómo se comporta.

Answer 12

puede utilizar plug-in cxcalendar. Parece otro datepicker. pero puede elegir el año y el mes en seleccionar después de hacer clic en el título del año-mes.