DatePicker
A date picker allows users to enter and select date and time values. It combines a date field for keyboard input with a calendar popover for mouse/touch selection.
Basic Example
mm / dd / yyyy
Features
- Dates and times – Support for dates and times with configurable granularity.
- International – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more.
- Time zone aware – Dates and times can optionally include a time zone.
- Accessible – Each date and time unit is displayed as an individually focusable and editable segment.
- Touch friendly – Date segments are editable using an easy to use numeric keypad.
- Validation – Integrates with HTML forms, supporting required, minimum and maximum values.
- Customizable – DOM structure and styling of all elements can be fully customized.
Anatomy
A date picker consists of a label, and group containing a date field and a button. Clicking the button opens a popup containing a calendar.
Label
Provides context for the input element
DateInput
Contains date segments for keyboard input
Button
Opens the calendar popover
Popover
Overlay containing the calendar
Calendar
Visual date selection interface
Interactive Examples
With Description
mm / dd / yyyy
Please select a weekday between 9 AM and 5 PM.
With Validation
mm / dd / yyyy
Please enter a valid date.
Date and Time
mm / dd / yyyy , hh : mm AM
With Time Zone
11 / 07 / 2022 , 10 : 45 AM PST
Calendar Popover
Click the calendar button to open the date picker popover:
November 2023
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| 29 | 30 | 31 | 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 1 | 2 |
Usage Guidelines
When to use
- For selecting specific dates or date ranges
- When users need to input dates frequently
- For scheduling and calendar applications
- When date validation is important
When not to use
- For approximate dates (use text input instead)
- When the date format is very specific to your application
- For dates far in the past or future where typing might be faster
Accessibility
- Each date segment is individually focusable and editable
- Keyboard navigation is fully supported
- Screen reader announcements for date changes
- High contrast mode support
- Touch-friendly interactions