E2.13.3start-end date co-visibility设计

起止日期需在同一视图内比较

别名: 日期范围选择 · date range picker · 起止不在同一屏

概念解释

选入住和离店、合同生效和截止,人要判断的是两天之间的关系:间隔几晚、有没有颠倒、是否跨月。两个日期若不能同时看见——先弹一个日历收起再弹另一个——比较就要靠工作记忆。起止同屏可见(start-end date co-visibility)要求在选定过程中两天(或两段月份)留在同一视图里。它管的是成对日期的比较,不是单日翻月累不累,也不是单日能不能打字。

机制

范围是一个对象,不是两次独立的选日。间隔、是否含首尾、跨月跨年,都是关系属性,必须对着两天一起算。先后弹出的单月历把关系拆成两段情节:选完开始,画面换成结束月,开始日从视野里消失,人只能记住数字再去对结束日。记忆滑了就会选成结束早于开始、或少算一晚。并排两个月、或在同一格网里高亮已选的起止和中间几天,是把关系外化到画面上。校验「结束必须晚于开始」只能在提交时抓住颠倒,抓不住「我以为是三晚其实是两晚」这种比较错误。

边界

两个日期业务上独立(出生日期和注册日期)不需要同屏,硬并排会暗示虚假关系。跨度以年计的范围(档案起止)并排两个月也不够,需要年层或时间线,而不是硬塞两个月历。窄屏并排两个月会把格子压到不可点,改成上下叠放两个月仍算同视图,只要滚动时已选的起止标记还在。只填一个开放式「开始、结束待定」时,同屏比较的对象还不存在。

怎么落地

  • 用同一视图展示开始与结束:并排两个月,或一个格网里同时高亮两端及中间。
  • 已选的开始日在选结束时仍保持可见和标记,不要把第一个日历关掉再开第二个。
  • 在视图内标出间隔(几晚、几天),让关系不必心算。
  • 验证:选一个跨月的入住离店,问间隔几晚。要回看已经关掉的日历才能答,同屏比较就没做成。再故意把结束选在开始之前,看颠倒是当场在格子上可见,还是只在提交后报错。

延伸

  • 同组E2.13.1 远期日期用日历选择成本高 · E2.13.2 必须同时支持键入
  • 相邻E2.14 时间与时段选择 · E4.03 表格
  • 站内检索start-end date co-visibility · date range picker · inclusive nights

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.13.3