Simple date field

Simple date field in Storybook

note

This component is being reworked. There will be a new version aligned with the latest guidelines in upcoming releases.

SimpleDateField is a date component composed of three separate input fields: day, month, and year. It is used to enter a date that has no relevance to the current date, such as a birth date.

The order of input fields is picked up from your locale by default. You can override this behavior manually by setting the inputFormat prop, though this is not recommended.

You can configure the input for the "year" field to accept four digit or two digit inputs using the yearFormat prop. Pass in yyyy for four digits and yy for two.

The displayFormat prop configures how the date will look in read-only format. The different configuration options are:

• vshort, 02/22/2022
• short, 22 Feb, 2022
• long, February 22, 2022
• abbreviated, Tues, Feb 22, 2022
• full, Tuesday, February 22, 2022

Set the autoFocus prop to True to automatically switch between fields when typing. You can also use tab or shift + tab on a keyboard to switch between fields.

The minDate and maxDate props are both the same as in the Date picker component.

For more examples see Storybook.