La entrada de fecha combina tres campos de entrada distintos: día, mes y año en un solo componente de fecha. Los usuarios ingresan fechas no relacionadas con la fecha actual, como las fechas de nacimiento, mediante este componente.
Cuando el usuario conoce con certeza una fecha, como una fecha de nacimiento o el vencimiento de una tarjeta de crédito.
Cuando se requiere la entrada de una fecha precisa y la selección del calendario puede resultar engorrosa. Por ejemplo, si el usuario debe ingresar una fecha que está en un pasado o futuro lejanos, puede ser más rápido y eficiente escribir la fecha.
Para fechas cercanas a la actual (por ejemplo, dentro de las próximas semanas o meses). En su lugar, utilice el selector de fecha.
Si es poco probable que el usuario tenga memorizada la fecha (por ejemplo, programar una cita con varios meses de anticipación a partir de la fecha actual). En su lugar, utilice el selector de fecha.
La entrada de fecha consta de los siguientes elementos:
Rótulo: Descripción clara y concisa que brinda el propósito y el contexto del campo de entrada de fecha. El rótulo ayuda a los usuarios a comprender la fecha la que se espera que ingresen.
Campo Día: Campo de entrada donde el usuario puede ingresar manualmente el día.
Campo Mes: Campo de entrada donde el usuario puede ingresar manualmente el mes.
Campo Año: Campo de entrada donde el usuario puede ingresar manualmente el año.
El componente entrada de fecha se adapta a los ajustes de la configuración regional del usuario y presenta los campos de día, mes y año en el orden que le resulte más familiar. Por ejemplo:
Estados Unidos: MM/DD/AAAA
Reino Unido: DD/MM/AAAA
Japón: AAAA/MM/DD
El componente ajusta automáticamente el orden de los campos y los rótulos para que coincidan con el formato de fecha adecuado para la región del usuario.
El orden de las entradas cambia según la configuración regional. Ejemplos para Europa (izquierda) y Estados Unidos (derecha).
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.
Cuando utilice una entrada de fecha, incluya el formato de la fecha como texto de ayuda. Confiar únicamente en el texto de marcador de posición para comunicar el formato de la fecha es problemático, porque el texto de marcador de posición desaparece una vez que el usuario comienza a escribir. Esto puede hacer que los usuarios duden sobre el formato previsto.
El componente entrada de número deriva su nombre accesible de un atributo aria-label. Cambiar el valor de texto del elemento rótulo también cambia el valor del nombre accesible. El atributo predeterminado aria-required='true' cambia a 'false' cuando la casilla de verificación requerida está marcada en Storybook.
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 la fecha que el usuario debe ingresar.
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.
Determines whether to switch the focus between fields automatically. If true, the focus is set on the next field after typing the exact amount of characters as set in the max length attribute.
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 the input. The value must be an object with day, month, and year properties, where month is indexed from 1. If the value prop is specified along with this prop, this prop's value is discarded.
Value of the input. Takes precedence over initialValue. The value must be in object format with day, month, and year property where month is indexed from 1. If this prop is passed, the component works in controlled mode and its value changes only if this prop changes.
Según la configuración regional, los campos de entrada se reorganizan para que coincidan con el formato de fecha regional. Esto también afecta al formato de las propiedades displayOnly y readOnly.
El componente DateInput proporciona un mecanismo de validación mediante la propiedad onChange. Esta propiedad acepta los parámetros event, value y errorCode. Los valores de errorCode pueden ser:
INVALID_DATE: El formato de fecha es incorrecto, por ejemplo, al introducir un valor de mes mayor que 12.
MIN_EXCEEDED: El valor de entrada es menor que el mínimo definido por las propiedades minDate, minMonth o minYear.
MAX_EXCEEDED: El valor de entrada es mayor que el máximo definido por las propiedades maxDate, maxMonth o maxYear.
Puede usar la propiedad displayFormat para modificar el formato de las fechas cuando utiliza las propiedades readOnly o displayOnly. Hay cinco alternativas diferentes:
Puede utilizar la propiedad variant para crear un componente de entrada con diferentes campos:
importReactfrom'react'; import{DateInput}from'@jutro/components'; exportconstBasicDateInput=()=>{ return( <divstyle={{display:'flex',gap:'2rem',flexWrap:'wrap'}}> <DateInputlabel="This is a simple date input"/> <DateInputlabel="This is a month and year input"variant='month'/> <DateInputlabel="This is a year input"variant='year'/> </div> ); };
Puede utilizar la propiedad stateMessages para mostrar un error en el componente DateInput.
importReactfrom'react'; import{DateInput}from'@jutro/components'; exportconstErrorDateInput=()=>{ return( <div> <DateInput label="This is a date input" stateMessages= {{ error:['This is an error message'], }} /> </div> ); };
Puede establecer una fecha mínima y máxima para el componente DateInput con las propiedades minDate y maxDate. Como alternativa, puede establecer valores independientes para meses y años utilizando minMonth, minYear, maxMonth y maxYear. El siguiente ejemplo comprueba, cuando pierde el foco, si el valor del año está entre 2000 y 2024 y, en caso de que no esté entre estos valores, muestra un error.
importReact,{ useState }from'react'; import{DateInput}from'@jutro/components'; exportconstMinMaxDateInput=()=>{ const[stateMessages, setStateMessages]=useState({}); consthandleChange=(event, value, errorObject)=>{ const errorCode = errorObject?.errorCode; if(errorCode ==='INVALID_DATE'){ setStateMessages({ error:['Please enter a valid date.'], }); return; } if(errorCode ==='MIN_EXCEEDED'|| errorCode ==='MAX_EXCEEDED'){ setStateMessages({ error:[`The year must be between 2000 and 2024.`], }); }else{ setStateMessages({}); } }; return( <div> <DateInput label="Enter a date between year 2000 and year 2024" minDate={{day:1,month:1,year:2000}} maxDate={{day:31,month:12,year:2024}} onChange={handleChange} stateMessages={stateMessages} /> </div> ); };
Se introdujo un nuevo componente @jutro/components/new/DateInput que reemplaza a los anteriores @jutro/components/SimpleDateField y @jutro/components/SimpleMonthYearField, que han quedado obsoletos.
El orden de las entradas cambia según la configuración regional. Ejemplos para Europa (izquierda) y Estados Unidos (derecha).
