Date and time
Native date and time pickers on the input fill, with the picker icon dimmed until hover and inverted on dark themes.
Examples
Date and time
Anatomy
input.input[type=date] | An .input of type date, time or datetime-local (month and week too). The browser draws the segments and the picker. |
::-webkit-calendar-picker-indicator | The picker icon in WebKit and Blink: 60% opacity, full on hover, inverted on dark themes so it stays visible. |
API
| Attribute | Values | Description |
|---|---|---|
min | <value> | Native: the earliest date or time the picker offers. A typed value outside it is :user-invalid and gets the danger ring. |
max | <value> | Native: the latest date or time. |
required | boolean | As on .input: an empty value is :user-invalid once the user has left the field. |
Accessibility
- The browser announces the segments and the picker; the input still needs its own label.
- For a date picker that is always visible, use the calendar.
| Key | Effect |
|---|---|
| ← / → | Moves between the day, month and year segments (native). |
| ↑ / ↓ | Changes the focused segment (native). |