DatePicker 日期选择

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

    适用

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

    不适用:

    • 用户仅需要选择时间值,而非日期,请使用「时间选择器」

    • 日期或日期范围选项过少(一般少于7个)或指定日期选择范围的场景,请使用「下拉选择」

    通用原则

    • 提供默认触发器,可按需定制触发器。默认触发器展示已选日期/时间,支持一键清除

    • 默认触发器中必须有占位文案,如选择的目的或展示默认时间

    • 日期显示格式请参考「文案与语气」中的规范

    • 可嵌入时间选择器来提供同时选择日期与时间的能力

    • 可选配操作栏,按需增加快捷选项提高用户的操作效率

    类型

    类型 何时使用
    Single Date Picker 单日期选择器 选择单个日期(允许同时选择具体时间)选择单个月份/年份
    Range Date Picker 日期范围选择器 选择一段日期范围(允许同时选择具体时间)

    单日期选择器

    日期范围选择器

    双面板

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

    单面板组合

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

    构成

    1. 触发器

      1. 默认触发器提供了占位文案或提供一个默认时间

      2. 点击后唤起日历选择器;再次点击则收起

      3. 如果默认触发器无法满足需求,可按需定制。可以是按钮、图标...

    2. 日期输入区

      1. 唤起日历面板时,默认聚焦在输入区

      2. 必须有占位文案或提供一个默认日期

      3. 提供输入日期能力

    3. 时间选择(可选)

    4. 导航区

      1. 定位当前日历面板,可切换年/月。

      2. **月份选择器:**提供 12 个月份供选择。

      3. **年份选择器:**按需提供可选年份。

      4. **单箭头(左):**选择上一个月份。若当前所在月为该年的初始月(如 2019 年 1 月),将会选择上一年的最后一个月(即 2018 年 12 月)

      5. **单箭头(右):**选择下一个月份。若当前所在月为该年的最终月(如 2019 年 12 月),将会选择下一年的第一个月(即 2020 年 1 月)

      6. **双箭头(左):**选择上一个年份。

      7. **双箭头(右):**选择下一个年份。

    5. 日历面板

      1. 展示年/月/日数据,用户可在此面板选择日期。

      2. **星期展示:**显示一周七天;不可交互

      3. **日期选项:**今日日期项高亮标记;非本月的日期变灰来降低视觉重量。可根据需求调整可选日期的内容,如禁止选择部分日期

    6. 底栏(可选)

      1. 可按需选配。默认搭配为「取消」与「确定」

        1. **取消:**当用户点击「取消」时,操作将中止,输入字段保持不变

        2. **确定:**当用户点击「确定」时,日历面板将关闭,所选日期和时间将显示在触发器中

        3. 也可以有其他搭配,如放置「今天、明天」之类的快捷选项;快捷选项使用文字按钮组件

    行为

    • 日历面板展开

      • 点击触发器展开日历面板
    • 日历面板收起:

      • 若没有底栏,用户选择日期后即收起日历面板,并提交数据,触发器上直接展示已选日期

      • 若有底栏,并在底栏放置了「确定」、「取消」按钮,则点击「确定」收起日历面板,并提交数据。默认触发器提供了展示已选日期的样式;点击「取消」仅收起日历面板不提交数据

      • 点击选择器外区域与点击「取消」效果一致,仅收起日历面板,不提交数据

    • 输入日期

      • 允许用户输入具体日期,系统自动补充「-」分隔线,只需判定用户的数字。

      • 非数字字符无法输入

      • 只要格式合法就写入;格式不对则无效

      • 天:允许用户输入一个数字,比如「2019-08-5」;但展示的时候格式为「2019-08-05」

      • 输入日期的同时,日历面板响应用户的输入,自动定位。

    • 选择日期

      • 单面板

        • 用户通过点击日历面板中的日期来选择日期。

        • 用户选择日期后,遵循日历面板的收起行为规则。

      • 双面板

        • 在用户选择开始日期之后,悬停的日期变为浅蓝色以提供正在选择范围的视觉反馈。

        • 当用户选择结束日期时,遵循日历面板的收起行为规则。

        • 双面板允许正反选择日期区间,偏早日期为开始时间,偏晚日期为结束时间。

    • 选择月份

      • 点击当前月份,日历面板将更改为月视图,用户可以通过选择其中一个月份来更改月份。点击后日历面板更改回日视图。直到用户继续选择了具体日期才改变数据。
    • 选择年份:

      • 点击当前年份,则日历面板将更改为年视图,用户通过选择其中一个年份来更改年份。点击后日历面板更改回日视图。直到用户继续选择了具体日期才改变数据。
    • 清除日期

      • 用键盘手动删除

      • 点击「输入区」右边的「清除图标」

      • 触发器中清除(业务决定)

    • 验证与反馈

      • 遵循表单的验证规则来为用户提供反馈。如错误、警告、成功、提示

    样式

    布局