根據組件的用途，可以分為六大類：Feedback 反饋、form 表單、basic 基礎、data 數據 、navigation 導航、other 其他。
表單在網頁中主要負責信息數據採集功能，用戶需要填寫輸入信息數據並且提交到後端數據庫，以此完成信息的採集，則這種組件就是表單組件。
本文主要講解表單中的treeselect樹選擇、datepicker日期選擇器和timepicker時間選擇器。
treeselect樹選擇
定義：
具有層級關係的選擇器。
使用場景：
- 需要使用選擇器，同時可以提供層級結構的枚舉項時。
- 彈出一個下拉選項給用戶選擇操作。
- 具有單選和多選的功能。
例如用戶搜索關鍵詞時，需要對搜索結果進行二次篩選，常見的使用樹選擇有城市、組織架構等。
基礎樣式：
只能選擇枚舉，不支持在選擇框中進行關鍵詞搜索，且為單選。用戶選擇選項後，浮層收起，表單為完成態。
對於選項中層級結構是否展開收起，則根據父子層級架構來看待，例如省市比較多，默認展開的話，查找起來會變得很困難，收起的話則可以快速找到省，再次點擊可快速找到市。
含有搜索樣式：
選擇框支持搜索，在用戶輸入字符串過程中，枚舉項動態匹配，且匹配的子集展開。當搜索無結果時出現搜索無結果提示，點擊無交互效果。
含有搜索樣式（可選擇空選項）：
用戶如果選擇空值，則提交數據為城市為空。
含有搜索樣式（可清空已選項）：
如果用戶已選擇，可提供用戶清空已選擇的機會。用戶如果已選擇選項，則鼠標hover，出現叉號，點擊叉號，清空選擇框。
含有搜索樣式（多選）：
用戶在輸入字符串時，選項中出現匹配選項，點擊複選框，輸入框出現選項tag同時清空輸入框。選擇框支持搜索，在用戶輸入字符串過程中，枚舉項動態匹配，且匹配的子集展開。點擊選擇器和選擇浮層以外其他區域，則浮層收起，樹選擇器為完成態。
datepicker日期選擇器
定義：
選擇日期的組件。
使用場景：
- 當用戶需要填寫年月日/年月時
- 點擊選擇框，出現日期選擇浮層
例如在boss直聘填寫工作經理的表單中，需要填寫在職時間，這裡使用的就是datepicker日期選擇器。
基礎樣式：
非時間段日期選擇器。點擊選擇框，出現日期選擇浮層，默認停留在用戶當天日期。用戶未選擇時，清空按鈕默認置灰，已選清空按鈕恢復正常狀態。
年月樣式：
只能選擇年月，用戶激活輸入框，出現年月選擇浮層。默認停留在用戶當月，清空按鈕默認置灰。用戶點擊選擇時，浮層收起，選擇框出現已選擇當年月。
時間段樣式：
時間段日期組件在結束時會多一個選項為至今。用戶選擇至今，則結束時間一直持續到未來。
timepicker時間選擇器
定義：
用於用戶具體選擇時間點時。
使用場景：
- 當用戶需要選擇具體時/分
- 點擊選擇框，出現時間選擇浮層。
基礎樣式：
點擊選擇框，出現時間選擇浮層，用戶可以用戶鼠標上下滾動滑輪選擇具體的時間點。
分鐘刻度樣式：
有的場景，不需要具體的分鐘，具體的分鐘在選擇起來因為選項太多而變得麻煩，用戶更多的使用場景是按照刻度來設置。點擊選擇框，出現時間選擇浮層，用戶可以用戶鼠標上下滾動滑輪選擇大概的的時間點。
日期和時間組合樣式：
有的表單，既要提交日期也要提交時間，這種情況可以用兩個表單設計，datepiecker和timepicker兩者組合，也可以在一個表單上完成，如下所示，用戶在選擇了日期後，出現時間選擇浮層。
閱讀更多 人人都是產品經理 的文章
