Fields component

The field components let the user input date and time values with a keyboard and refined keyboard navigation.

Introduction

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.

Fields to edit a single element

Fields to edit a range

All fields to edit a range are available in a single input version and in a multi input version.

Advanced

What is a section?

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:

• A month section for the token MM
• A day section for the token DD
• A year section for the token YYYY

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.

Control the selected sections

Use the selectedSections and onSelectedSectionsChange props to control which sections are currently being selected.

This prop accepts the following formats:

1. If a number is provided, the section at this index will be selected.
2. If "all" is provided, all the sections will be selected.
3. If an object with a startIndex and endIndex fields are provided, the sections between those two indexes will be selected.
4. If a string of type FieldSectionType is provided, the first section with that name will be selected.
5. If null is provided, no section will be selected

Usage with multi input range fields

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.

Usage with single input range fields

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:

Clearable behavior

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 IconButton.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <DateField />
• <DateTimeField />
• <MultiInputDateRangeField />
• <MultiInputDateTimeRangeField />
• <MultiInputTimeRangeField />
• <SingleInputDateRangeField />
• <SingleInputDateTimeRangeField />
• <SingleInputTimeRangeField />
• <TimeField />