datepicker日期選擇器
視頻及原型文件下載:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定義:
選擇日期的組件。
交互原則:
1、應該有一個合適的默認值,并不是所有的控件默認值都是今天或當前時間的。
2、控制可選/錄入的字段范圍,為了減少用戶出錯,保證產(chǎn)品數(shù)據(jù)的正常顯示,日期/時間控件應當要控制可選的范圍。
3、清晰明確的提交或確定按鈕,我見過很多非常糟糕的日期控件,在你選擇或切換選項后,還需要點擊輸入框或者空白處,才能填入/顯示已選擇的項目。
4、減少點擊次數(shù)
5、標識出特定日期,用戶并非總是“記憶”在選擇器中顯示或標注例如當天、已選默認值、周末、節(jié)假日等特殊的日期,可以幫助用戶更好、更快地做出選擇。
6、特殊的操作按鈕,對于一些通過填入日期或時間來篩選數(shù)據(jù)的選擇器,有必要在選擇器中加上如“清空”的按鈕,允許用戶快速清除已選項,回到數(shù)據(jù)的初始狀態(tài)。
交互說明:
1、【默認文案】:默認的提示文案內(nèi)容,例如:開始日期;
2、【默認的日期】:為了方便用戶,減少用戶輸入可以使用默認的日期,默認的日期盡量與當前業(yè)務(wù)需要有關(guān),例如:默認顯示本周的開始和結(jié)束日期;
3、【日期樣式】:需要注明需要的日期控件的樣式,例如選擇日、月、年、年月日、日期時間段等。
使用場景:
1、當用戶需要填寫年月日/年月時
2、點擊選擇框,出現(xiàn)日期選擇浮層
例如在boss直聘填寫工作經(jīng)理的表單中,需要填寫在職時間,這里使用的就是datepicker日期選擇器。

基礎(chǔ)樣式:
非時間段日期選擇器。點擊選擇框,出現(xiàn)日期選擇浮層,默認停留在用戶當天日期。用戶未選擇時,清空按鈕默認置灰,已選清空按鈕恢復正常狀態(tài)。

年月樣式:
只能選擇年月,用戶激活輸入框,出現(xiàn)年月選擇浮層。默認停留在用戶當月,清空按鈕默認置灰。用戶點擊選擇時,浮層收起,選擇框出現(xiàn)已選擇當年月。

時間段樣式:
時間段日期組件在結(jié)束時會多一個選項為至今。用戶選擇至今,則結(jié)束時間一直持續(xù)到未來。
