INPUTS / COMPONENTS
Date range picker
Choose the beginning and end of a period.
About date range picker
Date Picker is a helpful to visualize what days are available to select for the user.
Anatomy
Shared parts, named consistently.
- 1Date Picker FieldContainerRequired
The main container
- 2Date Picker FieldLabelRequired
The label of the field.
- 3Date Picker FieldAsterix
A star to show when required.
- 4Date Picker FieldSelected dateRequired
A text string to show what date has been selected.
- 5Date Picker FieldIcon ButtonRequired
An Icon Button will render to clear the input.
- 6Date Picker Fieldcalendar iconRequired
A decorative icon to enhance the input.
- 7Date Picker FieldHelper message
A string below the input to provide additional context about the Dropdown. When in an error state, the helper message will turn red.
- 1Date Picker calendarContainerRequired
The container of the picker.
- 2Date Picker calendarHeaderRequired
The header that contains the controls.
- 3Date Picker calendarTitlesRequired
The titles of the columns.
- 4Date Picker calendarDay buttonRequired
A button to select that day.
- 5Date Picker calendarHighlight
An icon to indicate significant day(s).
- 6Date Picker calendarToday indicatorRequired
An indicator to show the current day.
- 7Date Picker calendarFooterRequired
The footer that contains the legend
Try the default
A working example with the shared V1 visual language.
When to use
Use for a period with a beginning and end. Keep both selected dates visible and let users correct either end.
Type a date or use Alt+Down to open the calendar. Arrow keys move between dates, Page Up/Down changes month, and Enter selects. Escape closes without applying a draft range.