El selector de mes es un elemento de control en el que el usuario selecciona un mes específico de un calendario o lo ingresa manualmente. Este componente se utiliza habitualmente en aplicaciones de seguros en las que los usuarios deben especificar un mes, como seleccionar la fecha de inicio de una póliza de seguros o filtrar los datos por fecha.
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.
Use texto de ayuda para proporcionar contexto y comunicar qué mes se debe seleccionar. Estos son algunos ejemplos de lo que podría incluir:
Sugerencias que ayuden al usuario a elegir el mes adecuado.
Más contexto de por qué el usuario debe seleccionar un mes específico.
Utilice el texto de ayuda solo para la información pertinente. Evite repetir los mismos detalles que aparecen en el rótulo. Escriba el texto de ayuda con mayúsculas como se usan en las oraciones, y use 1 o 2 oraciones cortas y completas que terminen con un punto.
Utilice texto de ayuda para mostrar el contexto.
No use texto de ayuda que simplemente repita la misma información que aparece en el rótulo.
Los usuarios pueden ingresar el mes y el año manualmente en el campo selector de fecha o hacer clic en el ícono de calendario para seleccionar el mes y el año de un menú desplegable.
El selector de fecha se expande y se contrae con Spacebar. Los usuarios pueden navegar por las opciones utilizando las teclas de flecha y seleccionar por medio de la tecla Spacebar o Enter .
Aparece un widget de calendario cuando el usuario se desplaza con el tabulador al campo de entrada selector de fecha. La fecha actual se resalta y los usuarios que solo usan teclado pueden ingresar la fecha manualmente aquí. Los usuarios también pueden colocar el foco del teclado en el widget presionando la tecla de flecha hacia abajo cuando está expandido. Navegue por el calendario con las teclas de flecha. Los botones “Anterior”, “Mes”, “Año” y “Siguiente” pueden recibir el foco con la tecla Tab cuando el widget está abierto.
Se informa a los usuarios el valor de fecha completado automáticamente, cuando van al campo de entrada del selector de fecha con el tabulador, y que este valor está seleccionado actualmente. Se puede ingresar la fecha manualmente desde este campo de entrada. Si bien el foco permanece en la fecha completada automáticamente, también hay un widget de calendario disponible. Los usuarios también pueden mover el foco hacia el widget presionando la tecla de flecha hacia abajo. La navegación por la parte del calendario del widget se realiza con las teclas de flecha, y el valor actualmente en foco es narrado por los lectores de pantalla mediante un atributo WAI-ARIA aria-label. Los botones “Anterior”, “Mes”, “Año” y “Siguiente” pueden recibir el foco con la tecla Tab cuando el widget está abierto. El selector de fecha de React no habilita actualmente la navegación por teclado al enlace “Hoy”.
El componente selector de mes permite a los usuarios mover el cursor de inserción (cursor de texto parpadeante) entre diferentes secciones de la fecha (MM/AAAA). Sin embargo, los usuarios no pueden eliminar dígitos individuales dentro de una sección. Al eliminar cualquier dígito, se borra toda la sección (MM o AAAA), lo que requiere que los usuarios la vuelvan a escribir. Este comportamiento es igual en todos los componentes de fecha, donde la máscara de entrada da formato a la entrada mientras el usuario escribe.
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.
Cuando utilice este componente, asegúrese de que el rótulo comunique claramente el mes que el usuario debe ingresar o seleccionar.
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.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Initial value of input. Value must be in object format with month and year property where month is indexed from 1. If value prop is specified along with this prop, this prop's value is discarded.
Value of input. Takes precedence over initialValue. Value must be in object format with month and year property where month is indexed from 1. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
El formato de la fecha se determina de acuerdo con la configuración regional seleccionada. Por ejemplo, si la configuración regional es en-US, la fecha 20 de enero de 2024 tiene el formato “01/20/2024”. Si la configuración regional es en-GB, tendrá el formato “20/01/2024”.
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 fecha 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. El parámetro tiene el siguiente aspecto:
{ errorCode:ERROR.<ERROR_CODE_GOES_HERE>, }
The error code can be one of the following:
INVALID_DATE - when the user enters an invalid date, for example "January 32nd".
MIN_DATE_EXCEEDED - when the user enters a date that is before minDate.
MAX_DATE_EXCEEDED - when the user enters a date that is after maxDate.
Consulte la sección Uso para obtener detalles sobre cómo diseñar un selector de mes correctamente y las diferentes opciones de configuración que ofrecemos.
Puede permitir que el usuario elija un mes mediante el componente MonthPicker y, a continuación, utilice el controlador para obtener el mes seleccionado. Los usuarios seleccionarán un mes y año combinados.
Lo ideal es usar la API Intl.DateTimeFormat para dar formato al valor del selector de mes porque 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. La creación de un objeto Intl.DateTimeFormat y el uso de su método format() pueden evitar este problema porque un objeto DateTimeFormat recuerda los argumentos que se le pasaron y puede decidir almacenar en caché una parte de la base de datos.
Puede especificar el intervalo de fechas “mín.” y “máx.” para limitar la cantidad de opciones válidas; por ejemplo, “enero de 2024” y “diciembre de 2024” lo limitarían a cualquier mes de 2024.
