Saltar al contenido principal

Intervalo de fechas

Intervalo de fechas en Storybook

Uso​

Descripción general​

El selector de intervalo de fechas permite a los usuarios especificar las fechas de inicio y finalización. Los usuarios pueden seleccionar estas fechas en un calendario o ingresarlas manualmente. Este componente se utiliza en aplicaciones de seguros para especificar un intervalo de fechas para tareas como estas:

  • Seleccionar el período de cobertura de una póliza de seguros.
  • Filtrar datos de siniestros.

Cuándo se debe utilizar​

Para seleccionar un período con una fecha de inicio y finalización distintas.

Cuándo no se debe utilizar​

Para seleccionar una sola fecha. En este caso, utilice el componente selector de fecha.

Consulte también​

Formato​

Anatomía​

El componente intervalo de fechas

El componente intervalo de fechas consta de los siguientes elementos:

  1. Fecha de inicio
  2. Todas las fechas intermedias
  3. Fecha de finalización

Tanto la fecha de inicio como la de finalización incluyen un campo donde los usuarios pueden ingresar manualmente una fecha. También hay un ícono de calendario que, cuando se hace clic en él, abre un menú desplegable para la selección de fechas.

Formato de fecha​

El formato de la fecha que se muestra en el selector de fecha depende de la configuración regional del usuario. Esto significa que el formato de fecha variará según la ubicación del usuario y la configuración de idioma.

Por ejemplo, en los Estados Unidos, el formato de la fecha suele ser MM/DD/YYYY, mientras que en muchos países europeos, el formato es DD/MM/YYYY.

El formato de fecha se muestra como un marcador de posición dentro del selector de fecha para ayudar al usuario a ingresar la fecha. Esto asegura que el formato permanezca visible durante todo el proceso de ingreso de información.

Contenido​

Pautas generales de redacción​

  • 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.
  • Las palabras y las oraciones deben ser breves.

Inclusión de un rótulo​

Rotule el selector de intervalo de fechas con texto claro y descriptivo. Este rótulo debe comunicar su propósito y el tipo específico de año que se selecciona.

Los rótulos aparecen encima del campo de entrada de fecha, están alineadas a la izquierda y utilizan mayúsculas como se usan en las oraciones.

Coloque un rótulo permanente fuera del campo.
No utilice texto de marcador de posición como sustituto del rótulo.

Comportamientos​

Estados​

El componente selector de intervalo de fechas se comporta como un campo de entrada, con los mismos estados interactivos.

Interacciones​

Ratón​

Los usuarios pueden interactuar con este elemento haciendo clic en el área dentro del borde.

Imagen que ilustra a un usuario haciendo clic dentro del campo selector de intervalo de fechas

Teclado​

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.

Lector de pantalla​

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”.

Accesibilidad​

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 los rótulos comuniquen claramente las fechas que el usuario debe ingresar o seleccionar.