COMPONENT 37 · Selection & Values
日期选择器
Date Picker
也叫Calendar PickerDate Field日期控件NSDatePicker
通过日历或结构化输入选择单个日期。
Selects a date through a calendar view or structured input.
ANATOMY & USAGE
结构与使用建议
组成部分
- 日期输入
- 日历触发器
- 日期网格
适合使用
- 任务需要合法日期且浏览相邻日期有帮助时。
不建议使用
- 用户更适合直接键入熟悉日期或只需选择月份时。
键盘与无障碍
- 允许键盘直接输入；日历网格支持方向键，完整朗读年月日与不可选原因。
DESCRIBE IT TO AI
这样告诉编程助手
实现日期选择器（Date Picker）：通过日历或结构化输入选择单个日期。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<label class="demo stack" for="picker">
<span>日期选择器</span>
<input id="picker" type="date">
</label>