Date picker 日期选择器
/DAYT PIK-er/ · noun · 输入类模式 · #055
弹出的日历，免打字选日期。一旦涉及区间或可约规则，它的复杂度就都值了。
别名：日期范围选择器。
你可能会这样叫它
- “日历选择器”
- “弹出的日历”
- “日期选择框”
- “表单里选日期的小日历”
- “iPhone 上的日期滚轮”
……它的名字是 日期选择器（Date picker）。
常见问题
日期范围选择器是什么？
就是一次选开始和结束两个日期的日期选择器，比如酒店的入住和离店、报表的统计区间。通常电脑上并排显示两个月、手机上显示一个月，把两次点选之间的日子连成一段高亮，还常带“最近 7 天”这类快捷选项。Compose 有 DateRangePicker，Flutter 有 showDateRangePicker()；SwiftUI 和网页都没有自带的范围选择器，一般用开始、结束两个日期框。
代码里叫什么
| SwiftUI | DatePicker MultiDatePicker |
|---|---|
| UIKit | UIDatePicker |
| Jetpack Compose | DatePicker DatePickerDialog DateRangePicker |
| Android (Views) | MaterialDatePicker MaterialDatePicker.Builder.dateRangePicker() |
| Flutter | showDatePicker() CalendarDatePicker showDateRangePicker() |
| Web (HTML) | <input type="date"> 没有范围输入，用开始、结束两个日期框 |
| React (MUI X) | DatePicker DateRangePicker DateRangePicker 属于付费的 Pro 版 |
复制给 AI 编程工具
给这个字段加一个日期选择器：点击后弹出月历，有上个月 / 下个月按钮，标出今天，已选日期填充高亮，允许范围之外的日期禁用。离得很远的日期（比如生日）也必须能直接输入。字段里按用户所在地区的格式显示所选日期，日历要能完全用键盘操作（网页上用 <input type="date"> 也可以）。