El componente selector de hora permite a los usuarios seleccionar una hora en un menú desplegable. Este componente se utiliza comúnmente en aplicaciones de seguros en las que los usuarios deben especificar una hora, como programar una cita o configurar un recordatorio.
Rótulo: Describe el propósito del campo de entrada.
Texto de ayuda (opcional): Proporciona contexto adicional o ayuda al usuario a elegir la selección correcta.
Entrada del menú desplegable: Muestra la opción seleccionada por el usuario. Los usuarios pueden escribir en el campo de entrada para encontrar una opción que coincida con su consulta. También pueden ingresar una hora personalizada.
Menú desplegable: Muestra una lista de horas de entre las que elegir.
El componente selector de hora puede contener tanto un reloj de 12 horas como uno de 24 horas. Use el formato que corresponda a la región para la que ofrece su producto. Por ejemplo, en Estados Unidos se utiliza el reloj de 12 horas.
En un sistema de reloj de 12 horas, el día de 24 horas se divide en dos períodos, “a. m.” y “p. m.”, y cada período consta de 12 horas.
El formato del marcador de período de día está determinado por la configuración regional del usuario. Los desarrolladores no tienen control sobre él. Para la configuración regional en-US, la forma predeterminada de escribir el marcador de período de día es “a. m.” y “p. m.”.
El formato del marcador de período de día está determinado por la configuración regional del usuario. En este ejemplo se utiliza la configuración regional en-US.
Jutro admite menús desplegables con campos de entrada con predicción de escritura. Los usuarios pueden ingresar texto manualmente para filtrar los elementos desplegables. Esta característica es útil para ayudar a los usuarios a seleccionar de entre una lista larga.
Los menús desplegables con la función de predicción de escritura habilitada proporcionan sugerencias a medida que los usuarios escriben. Las selecciones aparecen en función de los caracteres que los usuarios hayan ingresado. Cuantos más caracteres introduzcan los usuarios en el campo, más refinada se volverá la lista.
Un selector de hora puede incluir un control de entrada para la zona horaria. El selector de zona horaria también admite la funcionalidad de predicción de escritura, lo que permite a los usuarios filtrar a través de la lista de opciones.
En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
No coloque texto de marcador de posición en el campo de entrada. El texto de marcador de posición sobrecarga la memoria a corto plazo de los usuarios porque desaparece una vez que se ingresa un valor. También supone una carga adicional para los usuarios con discapacidades visuales y cognitivas.
En lugar de eso, coloque sugerencias e instrucciones, incluidos ejemplos y requisitos de formato, fuera del campo.
El campo de entrada para el selector de hora sigue las pautas de contenido para los campos de texto.
El texto del mensaje de error indica a un usuario cómo corregir el error. En el caso del selector de hora, los errores a menudo están relacionados con algo que debe corregirse para la validación integrada.
Los campos no válidos deben marcarse claramente. En selectores con más de un campo, establezca el estado no válido en el campo individual que desencadena el error.
En el texto de error, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto.
Use el texto de error para guiar al usuario y mostrarle una solución.
No escriba mensajes de error ambiguos ni deje a los usuarios pensando cómo resolver un problema.
Utilice un asterisco (*) para indicar los campos obligatorios. El asterisco precede al rótulo del campo. Esto ayuda a los usuarios a identificar fácilmente qué campos son obligatorios escaneando solo el carácter más a la izquierda del rótulo.
Además de marcar los campos obligatorios con un asterisco, se recomienda incluir instrucciones claras en la parte superior del formulario, como “Todos los campos marcados con un asterisco son obligatorios”, para garantizar que los usuarios comprendan el significado del asterisco.
Utilice un asterisco para indicar que un campo es obligatorio.
No use un asterisco para indicar algo que sea opcional.
El selector de hora aparece sin valor (predeterminado), texto de marcador de posición o una entrada rellena.
Ilustración
Estado
Descripción
Sin valor (predeterminado)
Indica al usuario que no se ha seleccionado ningún valor y que no hay un marcador de posición.
Marcador de posición
Indica al usuario que no se ha seleccionado ningún valor. El marcador de posición aparece atenuado.
Entrada rellena
Indica al usuario que la entrada está completa con datos.
Los selectores de hora también tienen estados interactivos para habilitado, en foco, deshabilitado, error, solo lectura y solo visualización.
Estado
Descripción
Habilitado
Indica al usuario que el elemento está habilitado para la interacción.
En foco
Indica al usuario qué elemento de la interfaz de usuario del sistema está el foco.
Deshabilitado
Indica al usuario que el valor de entrada no se puede cambiar debido a factores locales. Por ejemplo, una casilla de verificación sobre el campo de entrada debe estar marcada para acceder a este campo de entrada. El usuario puede habilitarla interactuando con la página.
Error
Indica que el usuario cometió un error de validación. El texto del error proporciona información a los usuarios para solucionarlo.
Solo lectura
Indica al usuario que el valor de entrada no se puede cambiar debido a factores externos. Por ejemplo, la falta de acceso de escritura. El usuario puede hacer algo para habilitarlo, por ejemplo, ponerse en contacto con un administrador.
Solo visualización
El estado de solo visualización se utiliza en dos casos:
Un elemento de interfaz de usuario se utiliza en el modo de visualización.
Un elemento de la interfaz de usuario se muestra en el modo de edición, pero nunca se puede editar.
Este estado se llamaba “solo lectura” antes.
En la siguiente imagen, se muestran los estados interactivos de los selectores de hora.
El selector de hora se expande y se contrae con la barra espaciadora. Los usuarios pueden navegar por las opciones utilizando las teclas de flecha y seleccionar por medio de BARRA ESPACIADORA o la tecla INTRO.
aria-labelledby establece una asociación programática entre el campo de entrada y su rótulo. El atributo WAI-ARIA de aria-autocomplete='list' comunica que aparecerá una lista de opciones entre las que el usuario puede elegir, pero el cuadro de edición conserva el foco. Al seleccionar la opción 'required' en Storybook, se agregan los atributos 'required' and 'aria-required="true"' al campo de entrada.
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
El elemento se puede operar con teclado, así como con mouse.
Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Al utilizar este componente en su aplicación:
Indique claramente los requisitos de formato.
Evite usar texto de marcador de posición.
Utilice una frase significativa para el texto de error.
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
El componente TimePicker define una clave de traducción:
Clave
Se usa para
jutro-components.fields.TimePicker.placeholder
El marcador de posición en el campo de entrada.
El componente TimezonePicker define una clave de traducción para cada zona horaria disponible. La clave siempre comienza con jutro-components.fields.TimezonePicker, seguida del nombre de la zona horaria.
Por ejemplo, para la zona horaria Africa/Lagos, el ID de la clave de traducción es:
El formato de la hora se determina de acuerdo con la configuración regional seleccionada. Por ejemplo, si la configuración regional es en-US, la hora tiene el formato “5:30 p. m.”. Si la configuración regional es pl-PL, la hora tiene el formato “17:30”.
Las entradas de Jutro han implementado controladores imperativos como mecanismo para proporcionar acceso a algunas características nativas comunes que podrían ser útiles para usted. Puede utilizar las siguientes características:
Establecer el foco para que usted establezca el foco del usuario en un componente específico.
Desenfocar para eliminar el foco del componente.
Desplazarse hasta el componente para poder llevar al usuario a un área específica de la página.
Estas características se proporcionan a través de la propiedad ref, que las expone de la siguiente manera:
Aunque algunos componentes de Jutro pueden proporcionar características complementarias o una función de ayuda para facilitar el proceso de validación, es su responsabilidad, como desarrollador, manejar la validación de cualquier entrada del usuario (con o sin ayudantes complementarios) y decidir qué mensajes de error se mostrarán.
Los componentes de Jutro se comportan en función de la implementación del desarrollador.
¿Cuándo se muestran los mensajes de error?
Los mensajes de error solo se muestran cuando los pasa al componente a través de la propiedad stateMessages. Esta propiedad recibe un objeto con el siguiente contenido:
El componente muestra cada mensaje de error proporcionado en el mismo orden que en la matriz.
¿Cuándo se produce la validación?
Esta decisión es suya, en calidad de desarrollador. Dado que los componentes no determinan cuándo se realiza la validación ni cuándo se debe mostrar el error, debe implementar la lógica para manejarla de acuerdo con los requisitos del proyecto, por ejemplo, mientras el usuario edita el contenido, cuando el componente pierde el foco y en el envío de formularios.
Si el usuario ingresa una hora no válida o una que esté fuera de los límites mín./máx., recibe un error de validación como tercer parámetro en el controlador onChange. Los parámetros tienen el siguiente aspecto:
{ errorCode:ERROR.<ERROR_CODE_GOES_HERE>, }
The error code can be one of the following:
INVALID_TIME - when the user enters an invalid time, for example "25:67 AM".
MIN_TIME_EXCEEDED - when the user enters a time that is before minTime.
MAX_TIME_EXCEEDED - when the user enters a time that is after maxTime.
Consulte la sección Uso para obtener detalles sobre cómo diseñar un selector de hora correctamente y las diferentes opciones de configuración que ofrecemos.
Puede permitir que el usuario seleccione una hora utilizando el componente TimePicker. A continuación, utilice el controlador para obtener la hora seleccionada.
import{TimePicker}from'@jutro/components/new'; exportfunctionDinnerTimeSelector(){ functionhandleTimeChange(event, value){ console.log('The user selected the following time for dinner:', value); // displays: { hours: 19, minutes: 30 } } return( <TimePicker label={{ id:'time-picker-label', defaultMessage:'Enter dinner time', }} name="Dinner time picker" onChange={handleTimeChange} /> ); }
Puede permitir que el usuario seleccione una hora y una zona horaria utilizando los componentes TimePicker y TimezonePicker. A continuación, utilice los controladores para obtener la hora y la zona horaria seleccionadas.
import{TimePicker,TimezonePicker}from'@jutro/components/new'; exportfunctionDinnerTimeSelector(){ functionhandleTimeChange(event, value){ console.log('The user selected the following time for dinner:', value); // displays: { hours: 19, minutes: 30 } } functionhandleTimezoneChange(event, value){ console.log('The user selected the following timezone for dinner:', value); // displays: { timezone: 'Europe/Warsaw' } } return( <> <TimePicker label={{ id:'time-picker-label', defaultMessage:'Enter dinner time', }} name="Dinner time picker" onChange={handleTimeChange} /> <TimezonePicker label={{ id:'timezone-picker-label', defaultMessage:'Set timezone for dinner time', }} initialValue={{timezone:'Europe/Warsaw'}} onChange={handleTimezoneChange} /> </> ); }
Es mejor usar la API Intl.DateTimeFormat para dar formato al valor del selector de hora por lo siguiente:
Cada vez que se llama a toLocaleString, tiene que realizar una búsqueda en una gran base de datos de strings de localización, lo que es potencialmente ineficiente. Cuando se llama al método muchas veces con los mismos argumentos, es mejor crear un objeto Intl.DateTimeFormat y usar su método format(), porque un objeto DateTimeFormat recuerda los argumentos que se le pasaron y puede decidir almacenar en caché una parte de la base de datos, por eso, las futuras llamadas de formato pueden buscar strings de localización dentro de un contexto más restringido.
Puede controlar el selector de zona horaria pasando la propiedad value. Esto es útil si desea utilizar el selector de zona horaria como componente controlado.
Anatomía del componente selector de hora.
El formato del marcador de período de día está determinado por la configuración regional del usuario. En este ejemplo se utiliza la configuración regional en-US.
