Date & time pickers
Calendar day
Section titled “Calendar day”Day cell for calendars and date pickers.
Variants: 7
| Property | Type / options |
|---|---|
| Day | text |
| State | Default · Hover · Today · Selected · In range · Outside · Disabled |
Date picker
Section titled “Date picker”Calendar dropdown: single date or range.
Variants: 2
| Property | Type / options |
|---|---|
| Type | Single · Range |
Do
- Show today and the selected range clearly.
- Allow typing the date in Date input.
- Offer presets for common ranges.
Don’t
- Don’t hide the year when ranges cross years.
- Don’t disable past dates unless required.
- Don’t use for birth dates — use Date input.
Date input
Section titled “Date input”Date field that opens the Date picker.
Variants: 5
| Property | Type / options |
|---|---|
| Label | text |
| State | Default · Focused · Filled · Disabled · Error |