产品经理成长励志@IT·互联网

Material Design 设计语言(十一)日期选择器

2019-08-01  本文已影响32人  宛苏

日期选择器(Pickers)

日期选择器允许用户选择日期或日期范围。

原则

1、关联

日期选择器可以显示过去、现在或将来的日期 - 与任务相关。

2、明确

清楚地指出重要日期,例如当前和选定日期。

3、直观

为确保选择一天或时间是直观的,请使用常见的选择器模式,例如日历。

类型

1、日历日期选择器

日历选择器可用于选择近期或过去的日期,此时以日历的格式按月查看日期非常有用。它们以对话框的形式显示。

比如:

· 预订餐厅

· 安排会议

它们不适合选择久远的过去或未来很久的的日期,例如输入出生日期或到期日期。(在这些情况下,改用输入选择器 或文本字段。)

日历选择器可以选择单个日期和年份。左右滑动可查看月份,点按年份附近的向下箭头,可垂直滚动选择年份。

2、日期范围选择器

日期范围选择器允许选择一系列日期。它会覆盖整个屏幕。

比如:

· 预订航班

· 预订酒店

点按日历上的开始日期和结束日期即可选择日期范围。上下垂直滚动则可查看月份。

3、日期输入选择器

日期输入选择器允许使用键盘上的数字手动输入日期。用户可以在对话框中输入日期或日期范围。

可以通过编辑图标从日期选择器访问输入选择器。如下:

上一篇下一篇

猜你喜欢

热点阅读