Date Picker
日期选择器
A calendar that pops open on click so the user can pick a specific day, with invalid dates greyed out.
Live Demo
Actually clickableSelected 12 3 2026
What you just saw:Choosing a departure date when booking a flight, picking a visit day for an appointment, setting a date range in an analytics dashboard — a month calendar that pops up on click.
What it actually is
The hard part of a date picker is not popping up a calendar — it is making the constraints legible. Birth dates cannot be in the future, past dates must be greyed out, and the allowed span has to be explained. All of that has to be visible directly on the calendar.
Anatomy · What it's made of
Trigger触发框
Shows the chosen date or a placeholder
Calendar月历
A 7×6 grid
Valid / Disabled可选/禁用日
Disabled days greyed out and unclickable
Selected选中日
Filled with the primary color
Range Highlight区间高亮
Highlights the middle of a selected range
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The user needs to pick one specific date | Yes |
| The date has validity constraints (no past dates) | Yes |
| Getting it wrong is costly (appointments, lease terms, invoices) | Yes |
| The user needs to pick a range of dates | Depends |
| Only an approximate month or year is needed | Depends |
Making someone open a calendar twice just to fill in a date is often worse than letting a text field accept a format like 2026-03-15.
Remember: never make users fail on format. Accept several input formats and correct them afterward.
Similar Patterns
Don't mix these upDate PickerCurrent
日期选择器
A calendar that pops open on click so the user can pick a specific day, with invalid dates greyed out.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
In one line:A calendar that pops open on click so the user can pick a specific day, with invalid dates greyed out.
Text Field
文本输入框
A bordered box the user types into — the most basic input control there is, and the one whose quality varies the most.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
Popover
浮出层
A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a date picker: defaults to today, past dates cannot be selected and are greyed out in the month calendar, and the chosen date is written back into the input.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add something for picking a date.
Say this instead
Add a Date Picker: defaults to today, past dates greyed out and disabled, the selected day filled with the primary color, today marked with an outline, arrow keys to move, Enter to select, Esc to close.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.