选择具体时间。

通用原则

  • 触发器通常为按钮、文字，允许定制
  • 时间面板可以完成选择时间、清除时间的闭环操作
  • 时间面板可增加 Footer 定制特定功能
  • 用户可在 24h 内自由搭配一个确定的时间点
  • 时间点颗粒度默认到秒，具体可根据业务需要定制
  • 两个时间之间数据联动，即：结束时间不能早于开始时间

构成

image.png

  1. 触发器：点击后触发时间选择面板
    1. 触发器通常为按钮触发器、文字触发器
    2. 可根据实际需要定制为图标等
  2. 输入区
    1. 唤起时间面板时，默认聚焦在输入区
    2. 必须有占位文案或提供一个默认日期
    3. 输入时间时，当前已选时间自动定位
  3. 当前已选时间
  4. 时间选项
    1. 允许内部滚动

行为

时间面板展开

点击触发器展开时间面板

时间面板收起

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

  • 时间点
    • 点击触发器收起
    • 用户选择时间后即收起时间面板
    • 点击选择器外区域仅收起日历面板
  • 时间区间
    • 点击触发器收起
    • 点击选择器外区域

输入时间

  • 允许用户输入具体时间，系统自动补充「：」符号，只需判定用户的数字。
  • 非数字字符无法输入
  • 只要格式合法就写入；格式不对则无效
  • 秒：允许用户输入一个数字，比如「03：14：2」；但展示的时候格式为「03：14：02」
  • 输入时间的同时，时间面板响应用户的输入，自动定位

选择时间

  • 用户通过点击时间面板中的时间来选择
  • 任意时间中，时分秒分布提交
  • 选择结束时间的时候，不显示早于开始时间的时间区间

清除时间

  • 用键盘手动删除
  • 点击「输入区」右边的「清除图标」
  • 触发器中清除（业务决定）

验证与反馈

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