datepicker日期選擇器
視頻及原型文件下載:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定義:
選擇日期的組件有缆。
交互原則:
1怕篷、應該有一個合適的默認值致盟,并不是所有的控件默認值都是今天或當前時間的凌那。
2乏屯、控制可選/錄入的字段范圍让歼,為了減少用戶出錯是掰,保證產品數據的正常顯示,日期/時間控件應當要控制可選的范圍耍休。
3刃永、清晰明確的提交或確定按鈕,我見過很多非常糟糕的日期控件羹应,在你選擇或切換選項后揽碘,還需要點擊輸入框或者空白處,才能填入/顯示已選擇的項目园匹。
4雳刺、減少點擊次數
5、標識出特定日期裸违,用戶并非總是“記憶”在選擇器中顯示或標注例如當天掖桦、已選默認值、周末供汛、節(jié)假日等特殊的日期枪汪,可以幫助用戶更好、更快地做出選擇怔昨。
6雀久、特殊的操作按鈕,對于一些通過填入日期或時間來篩選數據的選擇器趁舀,有必要在選擇器中加上如“清空”的按鈕赖捌,允許用戶快速清除已選項,回到數據的初始狀態(tài)矮烹。
交互說明:
1越庇、【默認文案】:默認的提示文案內容,例如:開始日期奉狈;
2卤唉、【默認的日期】:為了方便用戶,減少用戶輸入可以使用默認的日期仁期,默認的日期盡量與當前業(yè)務需要有關桑驱,例如:默認顯示本周的開始和結束日期竭恬;
3、【日期樣式】:需要注明需要的日期控件的樣式熬的,例如選擇日萍聊、月、年悦析、年月日、日期時間段等此衅。
使用場景:
1强戴、當用戶需要填寫年月日/年月時
2、點擊選擇框挡鞍,出現(xiàn)日期選擇浮層
例如在boss直聘填寫工作經理的表單中骑歹,需要填寫在職時間,這里使用的就是datepicker日期選擇器墨微。
基礎樣式:
非時間段日期選擇器道媚。點擊選擇框,出現(xiàn)日期選擇浮層翘县,默認停留在用戶當天日期最域。用戶未選擇時,清空按鈕默認置灰锈麸,已選清空按鈕恢復正常狀態(tài)镀脂。
年月樣式:
只能選擇年月,用戶激活輸入框忘伞,出現(xiàn)年月選擇浮層薄翅。默認停留在用戶當月,清空按鈕默認置灰氓奈。用戶點擊選擇時翘魄,浮層收起,選擇框出現(xiàn)已選擇當年月舀奶。
時間段樣式:
時間段日期組件在結束時會多一個選項為至今暑竟。用戶選擇至今,則結束時間一直持續(xù)到未來伪节。