时间选择器组件有哪些（解析App中的2大时间选择

App中常使用的时间(日期)选择组件有滚轮式与日历式2种。同样都可以实现具体时间或时间段选择的功能，实际应用中该如何取舍呢？今天我们就来看看这两种方式各自的优势与使用场景。

一、滚轮式时间选择器

交互方式

1. 点击btn呼出选择器

①从屏幕底部呼出弹层，如滴滴

②从菜单栏下方呼出弹层，如网易有钱

③在当前屏幕展开，如TIM

2. 上划滑动滚轮进行选择

3. 点击确定按钮进行提交

优势

1. 取材于用户现实中熟悉的密码锁、记分牌样式、用户熟悉上下滑动的操作方式，学习门槛低

2. 体积小，节约空间，多种页面位置，方便与多种情景进行配合3. 对用户的操作干扰性较小

劣势

1. 滚动选择方式较枯燥，在滚轮选项很多时，用户可能会在多次滚动选择中产生不耐烦情绪

2. 除了数字外没有其他信息进行核实确认

3. 视觉表现不够生动

适用场景

1. 用户对自己要选择的具体时间节点非常明确，例如生日、纪念日、预约服务、待办事项

2. 不同的用户选择的时间节点跨度很广，例如生日的年份会从1900-2018

使用建议

1. 选项数量一般为2~3项，最多5项；

2. 为用户设置合理的默认选项，减少操作次数，提升效率，例如：

3. 选择合适的展开位置，把滚轮选择器放到控件触发区域附近，方便用户操作

4. 用“今天”、“昨天”等相对概念，更快的激发人对时间的感知，例如上图滴滴、TIM

5. 不显示不可选时间，暗示用户可选日期，降低用户误操作可能性

6. 若有选项为非必填项，可提供忽略该选项操作，如下图生日管家，可选择不填写年份，点击忽略按钮后，年份收起。

二、日历式时间选择器

交互方式

1. 点击btn打开选择器，通常为新开页面（如上图飞猪）或全屏弹层（如去哪儿）

2. 点击或者滑动选择某一具体时间或时间段

3. 点击确定按钮进行提交

优势

1. 取材于用户现实中熟悉的日历样式，用户学习成本低。

取材于用户现实中熟悉的密码锁、记分牌样式、用户熟悉上下滑动的操作方式，学习门槛低

优势

1. 取材于用户现实中熟悉的密码锁、记分牌样式、用户熟悉上下滑动的操作方式，学习门槛低

劣势

1. 占用面积大，新开页面或全屏弹层对用户操作的连续性干扰较大

2. 单页展示的时间选项较少，不便于选择时间跨度较大的时间段

适用场景

1. 用户不能明确具体时间，只有大致范围，例如这个月的某一天

2. 用户需要对自己选择的时间进行二次确认，例如通过星期确定时间有没有记错

3. 不同用户选择的时间主要集中在一个范围内，如预定火车票主要集中在未来一个月内

使用建议

1. 设置合理的默认页面，减少操作次数，提升效率。通常采用日历式选择器的场景都是选择近期时间，所以默认页面为当前月，如本章节顶部示例，都默认展示当前月。

2. 提供返回默认页的按钮，方便用户进行选择；如下图生日管家、大姨妈，在查看日历时，当日历显示页为非当前页时，出现返回当前日期按钮

3. 当选择时间范围跨度较大时提供快速跳转的方式，可以与滚轮式选择器配合使用

4. 将不可选择的时间置灰，暗示用户可选日期，降低用户误操作可能性

所以

滚轮式时间选择器和日历式时间选择器各有所长，设计师要根据实际场景对分析需求并灵活判断该用哪种交互方式更合理。

当然，没有最好只有更好，今天分析的两种方式只是较为常见的选择方式，可以用于大部分场景下。在这之外也有其他特别的方式，例如：

货拉拉：弹层外区域显示已选中内容自如：表格式选择滴答清单：可自定义选择日历的排布方式详细情况就不在这里唠叨啦，如果你感兴趣的话，百看不如一见，不妨亲自去试一试~也许会有新收获哦。