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

Input

DatePicker

2026-07-21📅

‹July 2026›

MonTueWedThuFriSatSun

293012345 6789101112 13141516171819 20212223242526 272829303112

Quick checkChoose the best answer

A hotel booking needs check-in and check-out dates. Sold-out dates are unavailable and check-out must be later. How should input work?

Use two free-text fields and validate formats and order only after submissionUse two unrelated calendars and only check whether each date is availableUse a date-range picker, disable unavailable dates, and validate the order as users select

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 date
2026-07-21
July 2026
MonTueWedThuFriSatDay
20212223242526
Travel dates
07-10→07-17
1011121314151617
Report range
Choose an appointment date
19202122232425
Past dates can’t be selected
A date with clear availability rules
TodayLast 7 daysLast 30 days
07-15 ~ 07-21

When NOT to use it

Use a calendar for a year that is faster to type
Date2026/7/32
A manually entered date can have both an invalid format and an invalid day
Allow impossible ranges without feedback
14:30
131415
003045
Hide disabled-date rules
13141516171819
For a broad range, a full calendar adds unnecessary effort
Mix date formats without explaining them
FrontendBackendDesign

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

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

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.