DatePicker
You might say
Give people a calendar to choose a date instead of making them type it in.
Choose a date or date range from a calendarA date picker reduces ambiguity by showing dates in a calendar. It may select one day or a range. State the allowed dates, whether the start and end days are included, and which time zone applies when people work across regions.
Know first
When to use it
- Appointment date
- Travel dates
- Report range
- A date with clear availability rules
When NOT to use it
- Use a calendar for a year that is faster to type
- Allow impossible ranges without feedback
- Hide disabled-date rules
- Mix date formats without explaining themFrontendBackendDesign
Anatomy
7 Month›1314151617181920212223242526
Show the selected date in a consistent format
Use the navigation controls to change the year or month
A seven-column grid that shows every day in the month
An ordinary date; highlight it on hover
The selected date, shown with a solid highlight
Variants
Single
1314151617181920212223242526
To select a single date, such as a birthday or due date
Range
07-10
→07-17
1011121314151617
When someone needs to select a date range
Disabled
19202122232425
Past dates are unavailable
When a date is unavailable, explain why before someone selects it
Shortcuts
TodayLast 7 daysLast 30 days
07-15 ~ 07-21
Offer common date ranges as quick picks
Typical use cases
Booking
Operating Report
Last 7 days
07-15 ~ 07-21📅
Sales
¥ 82,410
▲ 12.4%
Order volume
1,286
▲ 8.1%
Price per customer
¥ 64
▼ 2.3%
Travel search
Book an in-person session
Choose an arrival date. Gray dates are fully booked.
2026-07-23📅
MonTueWedThuFriSatSun
20212223242526
Analytics filter
Website 2.0 launchIn progress
Owner
Alex Chen
Alex Chen
Deadline
2026-07-31📅
10 days left · The owner will be notified if the deadline passes
Deadline setting
Shenzhen ⇄ Hangzhou
Check-in 07-24
→
Departure 07-27
MonTueWedThuFriSatSun
20212223242526
272829303112
Further reading