The field components let the user input date and time values with a keyboard and refined keyboard navigation.
The fields are React components that let you enter a date or time with the keyboard, without using any popover or modal UI. They provide refined navigation through arrow keys and support advanced behaviors like localization and validation.
All fields to edit a range are available in a single input version and in a multi input version.
The field components have an internal state to update the visible value.
It will only call the
onChange callback when all the sections of the modified date are filled.
On single element fields
On a single date field (
onChange will be called if all the sections are filled.
In the example below,
onChange will not be fired until the date is fully completed:
On a date range field (
onChange will be called if all the sections of the date you modified are filled,
even if some sections of the other date are not filled.
In the demo below, changing the value of a start date section will fire
onChange even if the end date is empty.
But changing the value of an end date section will not fire
onChange until the end date is fully completed:
Value: 04/07/2022 – null
Only update when the value is valid
onChange callback received a 2nd parameter containing the validation error associated to the current value.
If you only want to update your state when the value is valid, you can ignore any
onChange call with a non-null
In the example below,
onChange will only be fired if the date is valid and its year is 2022:
onSelectedSectionsChange props to control which sections are currently being selected.
This prop accepts the following formats:
- If a number is provided, the section at this index will be selected.
"all"is provided, all the sections will be selected.
- If an object with a
endIndexfields are provided, the sections between those two indexes will be selected.
- If a string of type
FieldSectionTypeis provided, the first section with that name will be selected.
nullis provided, no section will be selected
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.