datepicker日期选择器
视频及原型文件下载:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定义:
选择日期的组件。
交互原则:
1、应该有一个合适的默认值,并不是所有的控件默认值都是今天或当前时间的。
2、控制可选/录入的字段范围,为了减少用户出错,保证产品数据的正常显示,日期/时间控件应当要控制可选的范围。
3、清晰明确的提交或确定按钮,我见过很多非常糟糕的日期控件,在你选择或切换选项后,还需要点击输入框或者空白处,才能填入/显示已选择的项目。
4、减少点击次数
5、标识出特定日期,用户并非总是“记忆”在选择器中显示或标注例如当天、已选默认值、周末、节假日等特殊的日期,可以帮助用户更好、更快地做出选择。
6、特殊的操作按钮,对于一些通过填入日期或时间来筛选数据的选择器,有必要在选择器中加上如“清空”的按钮,允许用户快速清除已选项,回到数据的初始状态。
交互说明:
1、【默认文案】:默认的提示文案内容,例如:开始日期;
2、【默认的日期】:为了方便用户,减少用户输入可以使用默认的日期,默认的日期尽量与当前业务需要有关,例如:默认显示本周的开始和结束日期;
3、【日期样式】:需要注明需要的日期控件的样式,例如选择日、月、年、年月日、日期时间段等。
使用场景:
1、当用户需要填写年月日/年月时
2、点击选择框,出现日期选择浮层
例如在boss直聘填写工作经理的表单中,需要填写在职时间,这里使用的就是datepicker日期选择器。
基础样式:
非时间段日期选择器。点击选择框,出现日期选择浮层,默认停留在用户当天日期。用户未选择时,清空按钮默认置灰,已选清空按钮恢复正常状态。
年月样式:
只能选择年月,用户激活输入框,出现年月选择浮层。默认停留在用户当月,清空按钮默认置灰。用户点击选择时,浮层收起,选择框出现已选择当年月。
时间段样式:
时间段日期组件在结束时会多一个选项为至今。用户选择至今,则结束时间一直持续到未来。