下面這篇是筆者整理的關于原型說明中日期選擇器的文章，將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面（表單頁、列表頁、詳情頁）寫法分享出來，對此感興趣的同學可以進來了解了解哦！

開發吐槽原型說明不清晰，領導催促原型要快細節再說，真是夾縫中生存的產品。今天教大家一個方法，既快又全。文末提供模板，可直接用。

步驟一：約定規范

如圖，與開發、UI約定組件規范，并維護在獨立文檔中。

步驟二：使用模板

如圖，Axure可將帶說明的通用組件置入元件庫，出原型時使用；開發看到組件，則使用約定規范；墨刀同理?！綪S：想了解word如何使用，請評論留言哈】

那么，規范與模板應該怎么寫？本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面（表單頁、列表頁、詳情頁）寫法，將規范與模板分享予您。

本期組件：日期選擇器

組件概述：以「日」為基本單位，基礎的日期選擇控件；可單選、多選、范圍日期。

一、 約定基礎規范

本節主要與研發約定默認實現內容，通過規范文檔維護

1. 通用基礎規范

1）輸入框樣式-單選&多選

1. 默認、懸停、完成需有對應樣式。
2. 選擇內容超出輸入框，則超出部分“…”代替。

2）輸入框樣式-范圍

左右兩邊皆有輸入值，默認通過“至”區隔：

3）展開操作

• 展開收起：單擊輸入框，展開面板；點擊其他區域收起。
• 展開方向：默認向下向右，當空間不夠時，需往空間足夠方向展開。
• 路徑記憶：收起面板，記憶本次路徑；重新載入，若無法記憶則回到默認。

4）面板基礎說明

• 面板說明：面板內部一般分為面板操作區、選項區、快捷按鈕區。
• 選項說明：選項區的選項需包含樣式可選、懸停、今日日期、選中、不可用（禁用）、范圍覆蓋。
• 面板操作區、快捷按鈕區的按鈕參考“按鈕說明”。
• 面板內容及其他交互，見“業務面板說明”。

2. 業務面板基礎規范

1）單選&多選

①選項排列：平鋪展示本月所有日期。

②選項切換：

• 點擊單箭頭切換月份，步長1月；點擊月份，面板切換至“月份面板”（具體交互參考“月份選擇器”），選擇月份后回到當前面板。
• 點擊雙箭頭切換年度，步長1年；點擊年度，面板切換至“年度面板”(具體交互參考“年度選擇器”)，選擇年份后，到月份面板選月份。

③默認選項：默認選中當前月份。

④完成選擇：

• 單選：單擊選項則完成選擇，收起面板。
• 多選：完成選擇后，通過“確認”按鈕完成。

2）范圍

在“單選&多選”基礎上，有以下不同：

①面板樣式：左右兩個面板，右側值默認為左側的延續。

②面板操作：兩個面板選項可單獨切換，但需確保左側數據小于右側。

③范圍樣式：需體現開始、結束、范圍內，區分選中樣式。

④完成選擇：選擇一個開始值再選一個結束值則完成選擇，收起面板。

• 支持先選結束值，再選開始值。
• 已有范圍后，重新點選，則重選范圍。

二、約定可控參數

本節主要與研發約定原型中可控制的參數，也通過規范文檔維護。文中會提供示例參數，及參數填寫說明

1. 通用可控參數

①狀態：可用/只讀/禁用

• 可用：即可修改可輸入。
• 只讀：框內一般有內容，但不能更改、輸入，只能復制。
• 禁用：無法與用戶交互，如無法復制或者輸入。

②提示文案：選擇時間

未選擇時，輸入框內顯示的內容，樣式需與輸入文字有區別。

③影響事件：暫無

獲取焦點、失去焦點、選中選項都可以產生影響其他組件的事件。

④一鍵清除：有/無

• 無選項時懸停，不做改變
• 有選項時懸停，右側圖標切換為“清空”狀態，點擊清空選項。（注：點擊清空圖標之外，為選擇器基礎交互）。

2. 業務面板可控參數

1）單選&多選

①默認值：今日

默認為當前最近的值，請結合業務情況定義。

②可選范圍：不限

不限，一般為前后兩千年。結合業務情況定義。

③可選數量：單選/N個

• 單選：點擊待選項切換選中，點擊已選項無交互。
• N個：為多選，單擊待選項增加選中，單擊已選項切換選中，達到最大選中數，需toast提示。

④周起始日：可選周一~周日。

即面板中排第一位的日期，一般為周一/周日。

⑤快捷選項：今日：即當天。

面板側邊增加快捷選項，點擊后，選項自動完成。需有快捷選項名稱及規則說明。

2）范圍

在單選基礎上，有以下不同。

①可選范圍：開始范圍&結束范圍

僅顯示此范圍值，請結合業務情況定義。

②最大范圍：不限

即開始到結束可選的最大范圍。

三、輸出說明模板

組件名稱前加個“規范”，便于團隊識別規范組件；模板可直接寫入注釋，并存為Axure/墨刀元件庫

1. 單選&多選

• 組件名稱：日期選擇器
• 狀態：可用
• 提示文案：請選擇
• 一鍵清除：有
• 預選值：今日
• 周起始日：周一
• 可選范圍：不限
• 可選數量：單選
• 影響事件：暫無

2. 范圍

• 組件名稱：日期范圍選擇器
• 狀態：可用
• 提示文案：開始月份、結束月份
• 一鍵清除：有
• 預選值：今日到下周
• 周起始日：周一

可選范圍：

• 開始范圍：不限
• 結束范圍：不限
• 最大范圍：不限
• 快捷選項：無
• 影響事件：暫無