Date Picker
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
DatePicker
You can say this to an AI Agent
Build check-in and check-out as a linked date-range picker. Disable sold-out and invalid dates, require check-out after check-in, and state whether the end date is included. Test cross-month selection, changing check-in, and no-availability states.
When to use it
- Appointment date2026-07-21July 2026MonTueWedThuFriSatDay20212223242526
- Travel dates07-10→07-171011121314151617
- Report rangeChoose an appointment date19202122232425Past dates can’t be selected
- A date with clear availability rulesTodayLast 7 daysLast 30 days07-15 ~ 07-21
When NOT to use it
- Use a calendar for a year that is faster to typeDate2026/7/32A manually entered date can have both an invalid format and an invalid day
- Allow impossible ranges without feedback14:30
- Hide disabled-date rulesFor a broad range, a full calendar adds unnecessary effort13141516171819
- Mix date formats without explaining themFrontendBackendDesign
Anatomy
2026-07-21📅‹July 2026›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
Report date filtering
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%
Appointment booking
Book an in-person session
Choose an arrival date. Gray dates are fully booked.
2026-07-23📅
MonTueWedThuFriSatSun
20212223242526
Setting a deadline
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
Hotel date ranges
Shenzhen ⇄ Hangzhou
Check-in 07-24
→
Departure 07-27
MonTueWedThuFriSatSun
20212223242526
272829303112
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check