SPT术语库

日期选择器 Date Picker

用户预约牙医时,从可预约范围内选择 2026 年 8 月 16 日,停诊日不能被选中。

前端与交互约 10 分钟 · 从真实需求理解

1为什么日期不能只当成一串文字?

牙医预约

预约日期

Date Picker 让用户从日历中选择日期,并把最小值、最大值和停用日期等规则放在选择过程里,而不是等提交后才猜测格式是否有效。

牙医预约可以允许 2026-08-08 到 2026-09-30 的日期,但 8 月 19 日和 8 月 26 日停诊;用户最后看到并提交的日期必须是日历规则认可的值。

2Date Picker 和 Select、Time Picker,边界在哪里?

Date Picker 负责在日期尺度上浏览和约束选择;它不等同于从少量固定项中挑一个的 Select,也不等同于选择某一天里的具体时刻。

  • 日期范围较大、需要看星期和停用日时,日历能把规则直接放在选择现场。
  • 只有几个固定日期时,Select 直接列出候选;选择 09:30 这样的时刻时,使用 Time Picker。

验收时要检查控件是否真的阻止过期和停用日期,而不是只检查提交后是否显示了一个字符串。

3Date Picker 的字段和日历如何配合?

牙医预约

预约日期

2026 年 8 月可预约范围内选择一天

一个 Date Picker 由日期字段触发器、月份和日期网格、可用性规则以及选中后的回填值组成。

  • 字段触发器告诉用户当前值,并负责打开或收起日历。
  • 日期网格让用户按日历关系浏览,而不是手动猜测格式。
  • 范围外和停用日期必须在控件层面表现为不可选,合法日期选中后回到字段。

4日期选择的状态如何表达?

未选择
已选合法日期
暂不可用

空字段、已选合法日期和整体不可用是同一 Date Picker 的不同状态;停用日期则属于日历规则中的不可选项,不应被误读成当前选择。

5选择合法日期后,预约怎样留下结果?

预约牙医服务日期
牙医预约表单
牙医预约

选择仍可预约的服务日期。

预约日期
请选择一个可预约日期

在预约动作中,日期选择器要把可选规则和提交反馈连起来:用户确认的是一个合法日期,而不是一段看似像日期的文字。

6什么时候该用 Date Picker?

范围内预约一天

日历直接表达可选范围和停用日期。

已选合法日期
不建议这样用只有三个固定活动日

候选很少且已经固定时,用 Select 直接列出选项。

固定候选无需打开完整日历
不建议这样用选择会议开始时刻

09:00 或 09:30 是时间值,应使用 Time Picker。

会议时间
已选 09:30

先看值的时间粒度和候选规模:需要在日历范围内选一天时用 Date Picker;只有少量固定日期用 Select;选择一天中的具体时刻用 Time Picker。

7怎样把 Date Picker 需求告诉 Agent?

请在牙医预约表单中使用 Date Picker:允许选择 2026-08-08 至 2026-09-30 的日期,禁用 2026-08-19 和 2026-08-26,选择 2026-08-16 后把结果回填到预约日期字段。请保留真实日历语义、键盘可操作性、范围和停用日约束;验收时确认不能提交停用日期,也不要用普通文本框冒充日期选择器。

8不用背,看看你能不能判断

1 / 3

Date Picker 最主要解决什么问题?

请选择一个最符合题意的答案

选择答案后自动进入下一题

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。