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.
In the field components, the date is divided into several sections, each one responsible for the edition of a date token.
For example, if the format passed to the field is
MM/DD/YYYY, the field will create 3 sections:
monthsection for the token
daysection for the token
yearsection for the token
Those sections are independent, pressing ArrowUp while focusing the
day section will add one day to the date, but it will never change the month or the year.
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
For multi input range fields, you just have to make sure that the right input is focused before updating the selected section(s). Otherwise, the section(s) might be selected on the wrong input.
For single input range fields, you won't be able to use the section name to select a single section because each section is present both in the start and in the end date.
Instead, you can pass the index of the section using the
unstableFieldRef prop to access the full list of sections:
You can use the
clearable prop to enable the clearing behavior on a field. You can also add an event handler using the
onClear callback prop.
You can also customize the icon you want to be displayed inside the clear
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.