日期选择器
Date Picker
别名:日期选择器日历选择选日期控件日历弹层日期输入框时间选择
这是什么
用日历网格选择日期的复合控件，通常由输入框触发弹出，也常内嵌展示。 头部提供年月切换，网格按周排列日期并高亮今天与选中日； 范围形态用两个日期夹出区间。避免手输日期的格式错误。
交互实验室
试一试，再决定怎么用切换月份并选择日期，观察当前日期与选中日期的区别。
正在加载实验室…
使用时关注什么
- 01今天和所选日期是两种不同状态。
- 02不可选日期需要可见说明，不能仅隐藏交互。
✓ 适用场景
- 表单需要选择日期且格式易错（预订、报表）
- 需要直观查看日期所在星期与月份结构
- 选择区间（入住退房、活动起止）
✕ 不适用场景
- 只选年份或月份，用更轻的年月选择器
- 移动端简单日期，原生日期输入体验更好
- 高频输入日期的录入场景，快捷键 + 手输更快
常见形式
内嵌日历
Inline
常驻展示，适合面板侧栏
触发弹出
Trigger
输入框 + 弹层，表单标准形态
范围选择
Range
两次点击夹出区间
实现要点
gridposition: absolutez-index: 10transition网格用 grid-cols-7，首日偏移由当月 1 号的星期决定；日期计算交给 Intl / Date API 处理时区与月末。弹出形态面板绝对定位在触发框下， 点击外部与 Escape 关闭。今日用描边、选中日用 accent 填充； 范围态记录起点终点，中间日期铺浅 accent 背景。键盘方向键移动焦点。
平台 API
<input type="date">aria-haspopuprole="dialog"相关概念
输入框Input
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件相似概念气泡卡片Popover
点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
组件相似概念下拉菜单Dropdown
由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
组件相似概念表单校验Form Validation
在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式搭配使用