Date Picker
日期选择器
Aliases:日期选择器日历选择选日期控件日历弹层日期输入框时间选择
What is it
A composite control picking dates on a calendar grid, usually popped from a trigger input but often shown inline. The header navigates months, the grid lays days out by week highlighting today and the selection; the range form bounds an interval with two dates. It avoids manual date-entry mistakes.
Interactive playground
Try it. Make an informed choice.Move between months and compare today with the selected date.
Loading lab…
What to look for
- 01Today and the selected day are separate states.
- 02Explain unavailable dates instead of only disabling interaction.
✓ When to use
- Forms need dates where formats cause errors like booking or reports
- Weekday and month context must be visible while choosing
- Interval selection like check-in/checkout or event spans
✕ When not to use
- Year or month only — a lighter picker fits better
- Simple mobile dates — the native date input feels better
- High-volume data entry — typing with shortcuts is faster
Variants
Inline
内嵌日历
Always visible — panel and sidebar friendly
Trigger
触发弹出
Input + popup — the standard form shape
Range
范围选择
Two clicks bound the interval
Implementation
gridposition: absolutez-index: 10transitionGrid with grid-cols-7; the leading offset comes from the weekday of the 1st. Delegate date math to Date / Intl APIs for timezones and month ends. The popup panel sits below the trigger, closing on outside click and Escape. Today gets an outline, selection an accent fill; in range mode the start and end record bounds and in-between days take a soft accent background. Arrow keys move focus.
Platform API
<input type="date">aria-haspopuprole="dialog"Related concepts
A single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsSimilarA non-modal layer that pops up beside its trigger on click, carrying medium-complex content such as text, a mini-form or a date picker. No backdrop and no blocking of the rest of the page; clicking outside or pressing Esc closes it.
ComponentsSimilarA menu of actions popping near its trigger to tuck away secondary operations and keep the interface tidy — the classic form being a "···" more button. The panel floats over content with a shadow; picking an item executes and closes, and destructive actions sit isolated below a divider in red.
ComponentsSimilarChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed with