type seleccionar para nacimiento insertar formulario formato fecha documentos calendario actual aaaa user-interface language-agnostic user-input

user-interface - seleccionar - insertar fecha en formulario html



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

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

El problema: el usuario necesita ingresar una fecha / hora

Consideraciones básicas

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

Las soluciones populares incluyen:

  • Cajas de texto
  • Cajas combinadas
  • Calendarios desplegables
  • Validación del lado del servidor y / o del lado del cliente
  • Diversas formas de alertar a 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: Mejor control de GUI para describir un rango de tiempo

Debe verificar sus requisitos de UI. 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 del usuario en un cuadro de texto, entonces se enfrenta a algunas decisiones:

  • ¿El formato de fecha / hora es rígido? por ejemplo, mm / dd / aaa hh: formato mm: ss solamente?
  • ¿O vagamente definido, para permitir las entradas de estilo "hoy", "mañana", "23 de enero"?
  • ¿Los formatos serán específicos del lugar? 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.

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

  • Puede ingresar fechas manualmente (escriba la fecha, en formatos comunes).
  • Puede usar su rueda de desplazamiento para cambiar rápidamente los campos de fecha / hora.
  • Tienes un calendario expandible que tiene meses desplegables y flechas hacia adelante / 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í hay un video corto (~ 7.5MB) que muestra cómo funciona el widget y cuáles son algunas de sus características: Video aquí

Esperaría que cualquier aplicación sofisticada tenga algunas o todas estas características.

Ser capaz de ingresar fechas relativas (hoy, la semana pasada, hace 3 días) es útil, pero no estoy seguro de lo práctico que sería, dadas preguntas estándar como "¿Cuál es tu fecha de nacimiento?", O "¿Cuándo lo harías? como X enviado por correo electrónico a usted? ".

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

Enter a date [ ] [...]

La elipsis mostraría un calendario para llenar el ingreso de texto, pero el usuario puede ingresar una fecha si así lo desea. 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 sofisticada y permitir expresiones como

"today" "Tomorrow" "23 Jan"

etc.

Editar: En respuesta a algunos comentarios, uno podría hacer la validación cuando la edición del texto pierda el foco (aunque odio ese tipo de cosas) en cuyo caso el contenido de edición podría cambiar de "23 de enero" a "23-01-2009" para indicar que la exprssion fue entendida.

Optaría por tres alternativas según la situación:

  1. 2 cuadros combinados. Una lista año + mes, otra el día
  2. 3 cuadros combinados. Un listado años, un mes, un día
  3. Calendario / s visibles y combos como este de YUI

Y creo que hay más opciones entre las que elegiría.

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.

Siempre he encontrado que Google Calendar es 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".

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", "casarse" o "+2" (para pasado mañana) y usar 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 puede ser habilitado u ocultado 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 ofrece una fecha mínima y máxima, por lo que la fecha de nacimiento puede tener un rango de, digamos, -100 años hasta el año actual, 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.

Un cuadro de texto con un enlace de imagen a un calendario emergente en el lado es mi elección. Lo mejor de ambos mundos.

Si quieres algo extra, puedes utilizar un analizador de fecha / hora de lenguaje natural como Chronic http://chronic.rubyforge.org/ spice it up.

Además, no te olvides de los usuarios internacionales.

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

Puedes hacerlo fácilmente con el teclado, pero deben tener un segundo conjunto de pequeñas flechas en el calendario para saltar un año a la vez usando el mouse.

Ejemplo de entrada de fecha http://s5.tinypic.com/2qscw28.jpg

Ejemplo de entrada de tiempo http://s5.tinypic.com/3518f7q.jpg

EDITAR: En respuesta a la pregunta, " ¿Qué pasa si quieres programar un evento que va desde las 11 p.m. del martes hasta la 1 a.m. del miércoles (por ejemplo, una compilación diaria)? ¿Cómo envuelves la hora pasada la medianoche? "

Si el tiempo "a" lo presiona más allá de la medianoche, pase 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.

texto alternativo http://s5.tinypic.com/15hlb8m.jpg

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

texto alternativo http://s5.tinypic.com/2yplphy.jpg

Juega en Google Calendar y observa cómo se comporta.

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 ingresar el 21 de diciembre de 2012, permítame usar:

  • 21 de diciembre de 2012
  • 21DEC2012
  • 21 de diciembre de 2012
  • 12/21/2012 (o 21/12/2012, elija uno, tal vez dependiendo de en qué país estoy usando el software)
  • 12212012 (mismo fragmento entre 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.

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 tiempo 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 & D Meetup para las 3 am! "

puedes usar el complemento 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.