Day 14 · Date Picker 日期选择器：选日期，看日历

Date Picker 用来让用户选择或输入日期。Ant Design 的 DatePicker 定义就是「select or input a date」，Material Design 也把它描述为选择一个日期或日期范围的控件。12

别把 Date Picker 和普通 Input、Calendar 混在一起：Date Picker 的重点是「提交一个日期值」；普通 Input 更适合用户已经记得很清楚的日期；Calendar 更像持续展示日程或日期状态的界面。Carbon 也把简单日期输入与日历选择器分开：可记住的日期适合 simple date input，需要看日期关系或排期时才适合 calendar picker。3

常见形态可以按任务拆：单日期、日期范围、月份 / 年份、带输入。Material Design 把 Date Picker 分为 docked、modal、modal input 三类；Ant Design 还提供 date、week、month、quarter、year 和 RangePicker 等类型。21

判断口诀：看关系用日历，记得清可手输。需要预约排期、选择截止日、比较某天是周几，Date Picker 很合适；只选具体时间时用 Time Picker，生日、证件日期这类用户常能直接输入的日期，不一定要弹出完整日历。Carbon 明确建议：日历选择器适合用户需要知道日期与其他天的关系或做排期，也提醒使用日历时仍应提供可输入日期的文本字段。3

下一期进入表单组件里的 Date Picker 之后，就可以继续看更多导航或布局类组件。