日期选择器（ Date pickers）一种相对” 复杂 “的封装组件，他的主要用途是，辅助用户完成日期设定任务。

飞猪旅行在订购酒店时，通过使用日期范围选择器，完成入住时间设定

常见的日期选择器有 3 种类型。

1. 对单日任务进行时间设定的选择器，我们称之为单期选择器（Calendar pickers），
2. 对某一段时间的任务进行时间设定的选择器，我们称之为日期范围选择器（Date range pickers）
3. 通过数值输入的方式，完成任务时间设定的选择器，我们称之为日期输入选择器（Date input pickers）

我们本节课的内容重点，就是要介绍一下这 3 类选择器的工作原理和使用方法。

单日选择器

使用单日选择器（Calendar pickers）时，每次只能选中 1 个日期。一个完整单日选择器主要由以下元素构成

①：引导文字、②：选中日期、③：模式切换按钮、④：年份切换按钮、⑤：月份切换按钮、⑥：当日日期、⑦：日期定位参照、⑧：星期参照

1. 引导文字

引导文字①，主要用于向用户阐释当前的场景任务

2. 选中日期

选中日期主要用于向用户反馈当前的选中状态，一般情况下，默认的选中日期为当天日期。

由于选中日期对于用户执行任务有非常重要的参照价值，它关乎用户录入的数据，是否符合预期。所以大多数情况下，这一字段信息的视觉样式，会被重点强调。Android 日期选择器一般采用大号字体来进行标识，而 iOS 系统则使用了带有强调色的文字。

3. 模式切换按钮

如果日期选择器除了支持日期选择录入外，还支持手动输入，那么，就会为用户提供一个可以实现模式切换的操作按钮

4. 年份和月份切换按钮

当我们执行日期设定时，如果预期日期距离当前日期较远时，为了提升选择效率，通常日期选择器会提供一个年份和月份快速选择的触发按钮，通过这个按钮可以触发年份和月份快速选定菜单，如图所示

5. 定位参照

日期选择器的默认选中日期为当日日期，如果用户计划选定的日期恰好为当日，那么启动日期选择器后，可以不进行任何操作，直接点击确定，提交设定即可。

但如果用户计划选定的日期并非当日，那么当日日期可以作为时间参照，为用户执行进一步选择提供参考

当然，仅靠当前日期作为选定参照，还远远不够，大多数情况下，用户在执行选中时，星期参照会被反复用到。

日期范围选择器

使用日期范围选择器（Date range pickers）进行日期设定时，通常需要设定一个开始日期和一个截止日期。一个完整的日期范围选择器通常由以下元素构成

①：引导文字、②：选中日期、③：模式切换按钮、④：年份切换按钮、⑤：当日日期、⑥：起始日期、⑦：结束日期、⑧：选中日期范围、⑨、星期参照

日期范围选择器和单日日期选择器，在构成元素上比较相近，例如都需要一个引导性的标题文字，用来描述当前的任务场景

其次，用来标识日期选中范围的文字，视觉样式同样也会使用大字体，或者带颜色的字体

如果当前时间范围选择器支持手动输入，同样也会为用户提供一个模式切换按钮

日期范围选择器同样可以以当前日期，作为选中范围的时间参照

两种选择器，最大的区别在于选中规则上，单日选择器，只需对单一日期执行选中，即可完成任务提交，但是日期范围选择器，通常需要用户设定两个日期，一个是起始日期，一个是截止日期

一般情况下，用户执行第一次的日期选中时，默认设置起始日期，第二次选中，则是设置结束日期，如果用户想要重新设定日期范围，只需要进行第三次选中即可，那样前两次的选中会被自动清除掉。

日期输入选择器

日期输入选择器（Date input pickers）主要借助键盘输入，完成日期设定。一个完整的日期输入选择器主要由以下元素构成

① 标题 ② 日期选择示意 ③ 键盘输入切换按钮 ④ 日期输入框

由于其构成元素在之前两种选择器的讲解中已经多次提到，我们在此不一一赘述，关于输入选择器的使用，需要重点强调的一点是，除非用户对想要设定的目标日期比较敏感，否则像输入 2 月 31 日这种不存在的日期，肯定会导致结果修正等一系列重复输入的问题。

其他类型的日期选择器

除了以上我们介绍的三种日期选择形式外，在实际的产品设计中，为了满足不同场景的设计需要，设计师还会定义出很多特殊类型的日期选择器，比如多日选择器，或是针对双数日期进行选择的日期选择器等。

但万变不离其宗，设计这些特殊类型的日期选择器时，可以参照我们前文中讲到的基本日期选择器模型，设计人员只需在此基础上，进行适当的优化调整，即可得出合适的设计方案。尽管日期选择器的需求场景千变万化，但是其核心设计指导思想是永恒不变的。

如下图案例所示，这是一款随机日期选择器的设计方案。用户可以随机选中想要选择的日期，当某个日期被选中时，会在选中日期一栏，以选项胶囊的形式进行呈现。当选中的日期个数，超出菜单宽度时，可通过左右滑动的方式，查看全部选中日期。如想删除某个已选日期，只需长按选项胶囊，或者对选项胶囊，执行删除操作即可。

使用禁忌

我们列举一些日期选择器的常见错误用法

错误 1：未强调选中日期

由于选中日期的信息非常重要，它关乎用户录入数据，是否符合预期，所以大多数情况下，这一字段信息的视觉样式，会被重点强调，Android 日期选择器一般采用大字号来进行格外标识，而 iOS 系统则使用了带有强调颜色的文字样式。

错误 2：日期选择器无星期参照

用户在执行日期设定时，星期参照信息是非常重要，不可被轻易省略

错误 3：日期选择器不支持年份切换

当我们执行日期设定时，选择的日期距离当前时间较远时，为了提升选择效率，通常选择器会提供一个年份和月份快速选择按钮，通过这个按钮，可以触发年份和月份选定菜单

错误 4：日期输入错误，无反馈

使用输入选择器，如果日期录入错误，应及时告知用户

错误 5：启用日期选择器，默认进入日期非当前时间

启用日期选择器时，默认的时间应该为当前日期，而不是过去很久前的某一天，或者未来很远的某一天，随便给定日期，很可能会给用户使用，带来额外的切换成本。

以上就是本次课程的全部内容，感谢阅读！