Date Picker

Interactive Demo

This demo lets you preview the date picker component, its variations, and configuration options.

For examples of all variants, please visit Storybook.

Date Picker Variants

There are two Date Picker types.

1. Date Picker

Use a date picker to select a single date, such as a payment date. Date pickers can be used to display past, present, or future dates. Dates can be inputted by typing or using the calendar. Date picker requires a day, month, and year. The placeholder can be localized.

2. Date Range Picker

Use a date range picker to select a range, such as holiday dates. Date range pickers can be used to display past, present, or future dates. Dates can be inputted by typing or using the calendar. Note that date range picker requires a day, month, and year, and the placeholder can be localized. The date range picker uses an input mask to let users focus on the first and second date separately. For accessibility, label the date range picker with a name that explains the purpose of both dates, such as ’From Date - To Date’ or ‘Arrival Date and Departure Date’.