UI组件——时间选择器简介

选择器是选择日期范围、时间段或两者兼而有之的绝佳工具。单击时，它们会展开为模式或对话框，并为用户提供一组可供选择的选项。

选择器具有各种设计和功能。对它们挑剔确实是一件好事，因为它会帮助您找到并使用最适合您的设计目的的。

移动输入选择器

根据 Material Design 指南， 移动输入选择器 是指用户可以手动输入日期的文本输入。这是最简单的日期选择器类型，如果提供了正确的验证和输入掩码，它会很好地工作。输入掩码在用户键入时调整文本格式。

如果您的产品迎合国际用户，请确保日期格式清晰易懂。提供用户激活字段后不会消失的清晰标签或占位符。

移动输入选择器为选择过去的日期（例如，出生日期或护照到期日期）或将来的日期提供了最佳解决方案。它们可以与日历日期选择器一起使用。但是，请记住，滚动日期可能很乏味——因此即使有其他方法可用，允许用户键入也是一种好习惯。

滚动日期选择器

滚动日期选择器允许用户在移动设备上选择日期和/或时间，因为它们是为触摸交互而设计的。默认情况下，日期/时间值是打开模式视图以编辑内容的按钮。

确保用户不必滚动到过去或未来太远来选择他们输入的日期和/或时间。

日历日期选择器

日历日期选择器是一种常用控件，用于选择与当前日期相差不超过一年的日期。单击后，会打开一个日历以提供日期列表。

当用户需要选择一个过去或未来的日期时，这种控制可能需要太多的努力。在这种情况下，输入日期选择器是一个更好的解决方案，尤其是对于移动用户。

在设计预订时，禁用不可选择的日期选项。

当前日期

默认情况下，日历显示 当前日期。你的任务是清楚地表明它，以便用户一眼就能认出它。通常，当前日期的样式应始终比选定日期的样式具有更大的视觉权重。

选定日期

所选日期应该没有今天的日期那么显眼。还建议在用户浏览日历时添加悬停状态。

日期范围选择器

当用户选择一个日期范围时，将其全部显示并强调第一个和最后一个日期。明亮的颜色覆盖将起到作用。确保提供范围填充以指示日期包含在范围内。日期范围选择器最常见的用例是预订航班或预订酒店。

建议并排显示两个月，以最大程度地降低交互成本并提高便利性。

选择预览

当用户在选择日期时在日历选择器周围浮动时使用悬停状态。它指示范围将如何变化，并提供用户当前位置的线索。此外，这种视觉反馈使交互更加愉快。

悬停状态应与选定状态不同。

遥远的日期

对于生日等遥远的日期，请使用忠实的旧输入选择器。这是一种有效且经过验证的方法，蛋糕上的樱桃是它不会提醒用户他们真正的年龄。此外，强迫用户滚动浏览大量页面会增加很多不必要的摩擦！

删除无效的日期选项

用户永远不会 100% 专注于一项任务。因此，您有责任防止他们出现意外错误，例如选择无效日期。例如，系统不应允许用户选择早于出发日期的返回日期。

处理这种情况的一种选择是提供有意义的验证消息来指示错误。更有效的方法是禁用无效和不合逻辑的选项。从视觉上可以明显看出特定日期不可用。最流行的技术是在用户尝试单击或点击日期时使用微妙的灰色或使日期处于非活动状态。

日、月和年的单独下拉菜单

有多种显示日期选择的方式：用户可以手动输入，从日历中选择，或者使用单独的下拉菜单来表示日、月和年。最终，集成文本输入和打开日历的控件为用户提供了在日期之间导航和选择必要日期的更多自由。

但是，设计人员需要考虑更多可能发生错误的场景。日、月和年的单独下拉菜单不易出错。用户不太可能混淆日期格式并选择日期而不是月份。然而，这个日期选择器涉及更多的点击和滚动，如果用户需要选择一个遥远的过去或未来的日期，这可能会很痛苦。

提供内置日期选项

有时，与其要求用户浏览日历并找到必要的日期，不如提供内置日期选项（例如今天、明天、昨天、2 周前等）更有意义。

必须在日历中指明选择，以便用户确信日期是正确的。需要注意的另一点是，该列表应仅包括使流程更方便的最常见日期，而不是提供会使用户感到困惑的不必要的选项。

月份和年份之间的导航

日历日期选择器允许用户在月份和年份之间导航，并选择过去或未来的必要日期。显示月份和年份的最生动便捷的方法是使用整个日历显示今年所有可用的月份，然后显示其他年份。

不要吝啬空间或尝试在几个月或几年内挤入单独的下拉列表。它尤其适用于东西比桌面设备小的移动用户，并且需要更多的努力才能更好地查看信息并达到点击目标。