You can use the variant prop to create an input component with different fields:
importReactfrom'react'; import{DateInput}from'@jutro/components/new'; 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> ); };
You can use the stateMessages property to display an error on the DateInput component.
importReactfrom'react'; import{DateInput}from'@jutro/components/new'; exportconstErrorDateInput=()=>{ return( <div> <DateInput label="This is a date input" stateMessages= {{ error:['This is an error message'], }} /> </div> ); };
You can set a minimum and maximum date for the DateInput component with the minDate and maxDate props. Alternatively, you can set independent values, for months and years using the minMonth, minYear, maxMonth, and maxYear. The following example checks when it loses focus if the year value is between 2000 and 2024 and in case it is not between these values, shows an error.
importReact,{ useState }from'react'; import{DateInput}from'@jutro/components/new'; 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> ); };
The date input combines three distinct input fields - day, month, and year - into a single date component. Users enter dates unrelated to the current date, such as birth dates, using this component.
When the date is well-known to the user, such as a birth date or credit card expiration.
When precise date entry is required and calendar selection might be cumbersome. For example, if the user needs to enter a date that's in the distant past or future, it can be faster and more efficient to manually type the date.
For dates that are close to the current time (for example, within the next few weeks or months). Instead, use the date picker.
If the user is unlikely to have the date committed to memory (for example, scheduling an appointment several months in the future). Instead, use the date picker.
The date input consists of the following elements:
Label: A clear and concise description that provides the purpose and context of the date input field. The label helps users understand the date they are expected to enter.
Day field: An input field where the user can manually type in the day.
Month field: An input field where the user can manually type in the month.
Year field: An input field where the user can manually type in the year.
The date input component adapts to the user's locale settings, presenting the day, month, and year fields in the order most familiar to them. For example:
United States: MM/DD/YYYY
United Kingdom: DD/MM/YYYY
Japan: YYYY/MM/DD
The component automatically adjusts the field order and labels to match the appropriate date format for the user's region.
The order of the inputs changes depending on the locale. Examples for Europe (left) and U.S. (right).
When using a date input, include the date format as help text. Relying solely on placeholder text to communicate the date format is problematic because placeholder text disappears once the user starts typing. This can leave users unsure of the expected format.
The number input component derives its accessible name via an aria-label attribute. Changing the text value of the label element also changes the value of the accessible name. The default aria-required='true' attribute toggles to 'false' when the required checkbox is checked in Storybook.
This component adheres to the following criteria for color and zoom accessibility:
Color: The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.0 AA requirements.
Zoom: All content is visible and functional up to and including a zoom factor of 200%.
This component has been validated to meet the WCAG 2.0 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance. When using this component, ensure the label clearly communicates which date the user needs to input.
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
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 true, displays the component value as plain text. Consider using readonly instead, if possible, because plain text has much worse 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.
Depending on the locale, the input fields are rearranged to match the regional date format. This also affects the format for the displayOnly and readOnly props.
The DateInput component provides a validation mechanism using the onChange prop. This prop accepts the event, value, and errorCode parameters. The errorCode values can be:
INVALID_DATE: The date format is incorrect, for example, entering a month value greater than 12.
MIN_EXCEEDED: The input value is lower than the minimum value defined by the minDate, minMonth, or minYear props.
MAX_EXCEEDED: The input value is greater than the maximum value defined by the maxDate, maxMonth, or maxYear props.
You can check the Min/Max example to see how the validation works.
You can use the displayFormat prop to modify the format of the dates when using the readOnly or displayOnly props. There are five different alternatives:
A new @jutro/components/new/DateInput component was introduced replacing the previous @jutro/components/SimpleDateField and @jutro/components/SimpleMonthYearField, which have been deprecated.
The order of the inputs changes depending on the locale. Examples for Europe (left) and U.S. (right).
