Examples

Code

React

The calendar picker is another name for the <SingleInputDateField> with a calendar picker button. To enable the date picker feature, you must pass both a from<TIME> property (i.e., fromDate, fromMonth, etc.) and a to<TIME> property (i.e., toDate, toMonth, etc.) to the date field component.

Review Storybook for React guidance of this component.

Style customization

The following CSS variables can be overridden to customize Input/Form components:

Form components

This component also makes use of form field styles, which can be customized by the following variables:

Guidance

When to use

• Use the date picker for dates that have happened within the last year, in the future, or is relevant to selecting the day of the week.

When to consider alternatives

• Don't use if users are entering a memorable date. Instead, use either single- or multi-input date fields.
• Don't use if the date occurred in the distant past (like date of birth).

Usage

Allow users to have flexibility in entering the date, such as allowing one-digit numbers with or without "0" prior to the number, or entering a date with or without slashes to separate month, day, and year.

• Example: "1" as well as "01" for a month or day.
• Example: "05/18/2022" as well as "05182022".

Accessibility

• These text fields should follow the accessibility guidelines for all text inputs.
• Users will be able to enter a variety of date formats that automatically format to the correct date format of MM/DD/YYYY. This change happens once the form field loses focus. For example, a user enters a date as "4122020" and it changes to "04/01/2020" once focus leaves the date input.
• Instructions are available make this more usable/accessible for assistive technology.

Related patterns

• Date field (multi-input)
• Date field (single-input)

Component maturity