DatePicker 日期选择

选择日期/月份/年份（可带具体时间点）的组件。

适用：允许用户自由选择日期的场景
不适用：

• 用户仅需要选择时间值，而非日期，请使用「时间选择器」
• 日期或日期范围选项过少（一般少于7个）或指定日期选择范围的场景，请使用「下拉选择」

通用原则

• 提供默认触发器，可按需定制触发器。默认触发器展示已选日期/时间，支持一键清除
• 默认触发器中必须有占位文案，如选择的目的或展示默认时间
• 日期显示格式请参考「文案与语气」中的规范
• 可嵌入时间选择器来提供同时选择日期与时间的能力
• 可选配操作栏，按需增加快捷选项提高用户的操作效率

类型

单日期选择器

日期范围选择器

双面板
当日期范围两端的日期必须被同时选择时使用。双面板允许反向选择日期区间，以日期早晚为判断条件，偏早日期为开始时间，偏晚日期为结束时间。

单面板组合
当日期范围两端的时间无需被同时选择时使用。配备两个单面板日期选择器，两者之间必须有数据联动。

构成

1. 触发器
   1. 默认触发器提供了占位文案或提供一个默认时间
   2. 点击后唤起日历选择器；再次点击则收起
   3. 如果默认触发器无法满足需求，可按需定制。可以是按钮、图标…
2. 导航区
   1. 定位当前日历面板，可切换年/月。
   2. 月份选择器：提供 12 个月份供选择。
   3. 年份选择器：按需提供可选年份。
   4. 单箭头（左）：选择上一个月份。若当前所在月为该年的初始月（如 2019 年 1 月），将会选择上一年的最后一个月（即 2018 年 12 月）
   5. 单箭头（右）：选择下一个月份。若当前所在月为该年的最终月（如 2019 年 12 月），将会选择下一年的第一个月（即 2020 年 1 月）
   6. 双箭头（左）：选择上一个年份。
   7. 双箭头（右）：选择下一个年份。
3. 日历面板
   1. 展示年/月/日数据，用户可在此面板选择日期。
   2. 星期展示：显示一周七天；不可交互
   3. 日期选项：今日日期项高亮标记；非本月的日期变灰来降低视觉重量。可根据需求调整可选日期的内容，如禁止选择部分日期
4. 底栏（可选）
   1. 可按需选配。默认搭配为「取消」与「确定」
      1. 取消：当用户点击「取消」时，操作将中止，输入字段保持不变
      2. 确定：当用户点击「确定」时，日历面板将关闭，所选日期和时间将显示在触发器中
      3. 也可以有其他搭配，如放置「今天、明天」之类的快捷选项；快捷选项使用文字按钮组件

行为

• 日历面板展开
  • 点击触发器展开日历面板
• 日历面板收起：
  • 若没有底栏，用户选择日期后即收起日历面板，并提交数据，触发器上直接展示已选日期
  • 若有底栏，并在底栏放置了「确定」、「取消」按钮，则点击「确定」收起日历面板，并提交数据。默认触发器提供了展示已选日期的样式；点击「取消」仅收起日历面板不提交数据
  • 点击选择器外区域与点击「取消」效果一致，仅收起日历面板，不提交数据
• 输入日期
  • 允许用户输入具体日期，系统自动补充「-」分隔线，只需判定用户的数字。
  • 非数字字符无法输入
  • 只要格式合法就写入；格式不对则无效
  • 天：允许用户输入一个数字，比如「2019-08-5」；但展示的时候格式为「2019-08-05」
  • 输入日期的同时，日历面板响应用户的输入，自动定位。
• 选择日期
  • 单面板
    • 用户通过点击日历面板中的日期来选择日期。
    • 用户选择日期后，遵循日历面板的收起行为规则。
  • 双面板
    • 在用户选择开始日期之后，悬停的日期变为浅蓝色以提供正在选择范围的视觉反馈。
    • 当用户选择结束日期时，遵循日历面板的收起行为规则。
    • 双面板允许正反选择日期区间，偏早日期为开始时间，偏晚日期为结束时间。
• 选择月份
  • 点击当前月份，日历面板将更改为月视图，用户可以通过选择其中一个月份来更改月份。点击后日历面板更改回日视图。直到用户继续选择了具体日期才改变数据。
• 选择年份：
  • 点击当前年份，则日历面板将更改为年视图，用户通过选择其中一个年份来更改年份。点击后日历面板更改回日视图。直到用户继续选择了具体日期才改变数据。
• 清除日期
  • 用键盘手动删除
  • 点击「输入区」右边的「清除图标」
  • 触发器中清除（业务决定）
• 验证与反馈
  • 遵循表单的验证规则来为用户提供反馈。如错误、警告、成功、提示