通用原则

• 触发器通常为按钮、文字，允许定制

• 时间面板可以完成选择时间、清除时间的闭环操作

• 时间面板可增加 Footer 定制特定功能

类型

类型	何时使用
固定时间点 / 区间	用户只能选择一个/一段预设的时间
任意时间点 / 区间	用户可以选择任意一个/一段时间

固定时间点 / 区间

• 用户仅可在系统预设的固定时间点内选择

• 区间时间之间数据联动，即：结束时间不能早于开始时间

任意时间点 / 范围

• 用户可在 24h 内自由搭配一个确定的时间点

• 时间点颗粒度默认到秒，具体可根据业务需要定制

• 两个时间之间数据联动，即：结束时间不能早于开始时间

构成

1. 触发器：点击后触发时间选择面板

   1. 触发器通常为按钮触发器、文字触发器

   2. 可根据实际需要定制为图标等

2. 输入区

   1. 唤起时间面板时，默认聚焦在输入区

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

   3. 输入时间时，当前已选时间自动定位

3. 当前已选时间

4. 时间选项

   1. 允许内部滚动

行为

时间面板展开

点击触发器展开时间面板

时间面板收起：面板收起时候提交数据，触发器上直接展示已选时间

• 时间点

  • 点击触发器收起

  • 用户选择时间后即收起时间面板

  • 点击选择器外区域仅收起日历面板

• 时间区间

  • 点击触发器收起

  • 点击选择器外区域

输入时间

• 允许用户输入具体时间，系统自动补充「：」符号，只需判定用户的数字。

• 非数字字符无法输入

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

• 秒：允许用户输入一个数字，比如「03：14：2」；但展示的时候格式为「03：14：02」

• 输入时间的同时，时间面板响应用户的输入，自动定位

选择时间

• 用户通过点击时间面板中的时间来选择

• 任意时间中，时分秒分布提交

• 选择结束时间的时候，不显示早于开始时间的时间区间

清除时间

• 用键盘手动删除

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

• 触发器中清除（业务决定）

验证与反馈

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