官網『日期選擇器』(Date Picker) 設計完整攻略：中小企業如何用一個小月曆把預約表單的流失率壓到最低

你以為只是個「選日期」的小框？其實它決定了預約會不會成立

有一個場景老闆一定不陌生：客戶在你官網好不容易點了「線上預約」，準備要挑一個看診、看車、看門市、拍照、參觀樣品屋的時間。結果他點到日期欄，跳出來的是一個 1990/01/01 的空白格，要他自己 key「2026-08-15」——然後他 key 錯格式，送出被擋，再回頭改，改到一半直接關掉頁面，你就少了一張詢問單。

這個小小的「日期選擇器」(Date Picker)，是台灣中小企業官網最常被隨手一插的元件，也是最常悄悄把訂單擋在門外的元件。它同時牽涉三件事：使用者體驗（好不好選）、資料正確性（後台會不會收到亂碼）、行動裝置友善度（手機能不能按）。而這三件事只要有一件沒做好，你的預約表單、活動報名、線上訂位、詢問行程的功能，就會默默地漏水。

這篇我用實戰角度，把日期選擇器該注意的所有細節、常見錯誤、以及在什麼場景要選哪一種樣式，一次講清楚。看完你就知道你官網那顆日期框，到底該不該重做一次。

Photo by Blessing Ri on Unsplash

一、先分清楚：你需要的是哪一種日期選擇器？

很多老闆會直接跟工程師說「加個日期選擇器」，結果拿到的可能根本不是你要的。日期選擇器其實至少有五種型態，用錯場景會很痛：

1. 單一日期選擇器（Single Date Picker）

最常見，就是「選一天」。用在生日欄位、單次預約、活動報名日期。長得像一個小日曆，點一下彈出月曆，選一天就關。

2. 日期區間選擇器（Date Range Picker）

用在「入住日～退房日」、「租借起日～還日」、「活動起訖」。要能同時記錄兩個日期，並在月曆上把中間的天數用底色標示出來。民宿、租車、設備租借、旅遊業一定要用這種。

3. 日期＋時間選擇器（Date Time Picker）

用在需要精確到「幾點幾分」的預約，例如美髮沙龍、醫美療程、汽車美容、教練課、看屋。選完日期後要再選時段。

4. 時段預約選擇器（Time Slot Picker）

這已經超越單純的日期選擇，它會顯示「這一天還有哪些時段可以預約」，並把已被預約的時段畫成灰色。餐廳訂位、看診預約、看屋預約幾乎都是這種形式。它需要跟後台的預約系統打通，難度較高，但轉換率的差距是天壤之別。

5. 快速選項按鈕（Preset Buttons）

不是完整的日期選擇器，但常常搭配使用。例如「今天／明天／後天」、「本週／本月／上個月」的快速按鈕。做內部報表、後台查詢時很好用，也可以放在報價單詢問表單裡（例如「希望多久內施工：一週內／一個月內／不急」）。

判斷原則：問自己「使用者到底要表達什麼？」。生日就用單日、住宿就用區間、預約就用日期＋時段。搞錯的話，客人會覺得「怎麼這麼難用」，就直接關掉了。

二、桌機版：那個彈出月曆，你設計對了嗎？

桌機的日期選擇器幾乎都是「點欄位 → 彈出月曆」的模式。看起來簡單，但地雷特別多。

1. 月曆一週從星期幾開始？台灣人請用星期一或星期日，別搞歐美格式

很多 UI 元件庫預設從「星期一」開始（歐洲格式）或從「星期日」開始（美國格式）。台灣其實兩種都有人用，但重點是：要跟你官網其他行事曆、部落格日期、後台一致。不要首頁一個格式、預約表單一個格式，客戶會困惑。

2. 月份要能快速切換

不要只給「上一個月／下一個月」的左右箭頭。至少加一個「點擊月份／年份可跳選」的功能。例如客人要預約半年後的健檢，你不能讓他按 6 次「下一月」箭頭——那就是設計失敗。理想的作法是點擊「2026 年 8 月」四個字，跳出可以直接選年份與月份的兩欄。

3. 不能預約的日期必須明顯灰掉

週日休診、國定假日公休、過去的日期、額滿的日期，這些「不能選」的日期一定要視覺上明顯區隔——通常是淺灰色文字＋滑鼠變成禁止符號＋點下去沒反應。如果不做，客戶會選了一個週日，送出後才收到「該日不營業」的錯誤，體驗超差。

4. 今天要有明顯標示

今天這一格通常會加個圓圈邊框或不同底色，讓客戶有時間定位感。這是小細節，但缺了它，客戶會下意識覺得「這網站怪怪的」。

5. 已選的日期要在欄位裡顯示清楚，格式要人性化

選完後不要在欄位裡塞「2026-08-15T00:00:00.000Z」這種格式（工程師常常忘記轉換）。要顯示「2026 年 8 月 15 日（週六）」或至少「2026/08/15 (六)」，讓客戶一眼確認自己選對了。

三、手機版：這才是你官網最該優先處理的戰場

台灣有超過 70% 的官網流量來自手機。而手機版的日期選擇器，是最容易「桌機版做得很漂亮、手機版卻爛到爆」的元件。

Photo by Bluestonex on Unsplash

1. 優先使用瀏覽器原生 <input type="date">

如果你的預約需求不複雜（只是選一天、不需要標示已預約時段），最簡單的解法就是 HTML5 原生的 <input type="date">。它會直接叫出 iOS 或 Android 內建的滾輪／月曆介面，客戶用得很順手，因為他每天都在用（訂機票、Google Calendar 都是這個介面）。開發成本 0，維護成本 0，體驗還好。

什麼時候不要用它？當你需要顯示「哪些時段還有名額」的即時資料，或需要客製化樣式時。這時就要自己開一個彈出的月曆元件。

2. 手機版的月曆不要小得像螞蟻

桌機版的日期選擇器直接搬到手機，會變成一個 320px 寬的迷你月曆，每一格只有 30px 大，客戶手指按不到。手機版的日期選擇器應該展開成幾乎全螢幕，每個日期格至少 40px×40px（Apple 建議 44px 是最小可觸控尺寸）。

3. 上下滑動比左右翻頁好用

手機使用者習慣「上下滑」而不是「左右翻頁」。桌機版是點箭頭切換月份，手機版可以直接讓月曆「連續往下捲」，一次呈現三、四個月，客戶用滑的就能看到未來三個月的所有可預約日期，這對民宿、看屋、健檢排程特別有效。

4. 千萬不要要求客戶「手動輸入」日期

絕對不要在手機版讓客戶用鍵盤 key「2026-08-15」。一是麻煩，二是不同瀏覽器對格式的容錯度不同，三是絕大多數客戶會 key 錯就放棄。永遠給他一個可以「點選」的介面。

四、四個「魔鬼藏在細節裡」的實戰配置

1. 最短／最長可選日期的預設要合理

健檢預約不能選今天（醫院要排班）、機票不能訂過去的日期、旅遊團要提前 7 天報名⋯⋯這些限制要在日期選擇器裡設好「minDate（最早可選）」、「maxDate（最晚可選）」。不要放給客戶亂選、送出後才擋——這叫做「事後懲罰」，是體驗設計上的大禁忌。

2. 台灣的節慶與農曆節日要標註（進階）

如果你是預約類服務（美髮、按摩、餐廳、旅宿），可以在日期選擇器裡標註春節、清明、端午、中秋、國慶等連假日期。這對客戶規劃「連假去哪玩」非常有感，也讓你的網站看起來比一般模板網站高級一階。

3. 時區與夏令時間的處理（跨國業務必看）

如果你的官網有海外客戶（例如做 3D 動畫外包、系統整合、多國旅遊），日期選擇器要考慮時區。特別是預約類：客戶在美國選「8/15 早上 9 點」，你收到的可能是台灣時間 8/15 下午 9 點——時差 12 小時。這件事在中小企業的官網上並不罕見。解法是：在表單旁邊清楚標示「以下時間為台北時間 (GMT+8)」，或使用會自動偵測使用者時區的元件。

4. 選完日期後要立刻顯示「摘要」給客戶再次確認

當客戶選完日期＋時段後，在按下「送出預約」之前，畫面上要出現一個小小的摘要：「您預約的是 2026 年 8 月 15 日（週六）14:00-15:00，是否確認？」這個動作看似多餘，但可以把「按錯／看錯」的預約錯誤率降到接近 0。餐廳、診所、看屋這種預約時段錯了就白跑一趟的服務，一定要做這一步。

Photo by Mango Matter on Unsplash

五、常見的三個「看起來沒事、其實在漏客」的錯誤

錯誤一：日期欄位跟其他欄位一樣是純文字輸入

老闆自己填表單時，你會覺得「還好呀，我 key 得很快」。但一般客戶不會，尤其是 50 歲以上的族群，看到空白的日期欄會直接放棄。改成點擊彈出月曆，詢問單的送出成功率往往就會有明顯提升。

錯誤二：預約時段用下拉選單，一次列出 30 個

「請選擇預約時段」下拉一打開：09:00, 09:30, 10:00, 10:30... 一路拉到 20:00。客戶滑到眼花，還不知道哪些時段其實已被預訂。正確做法是用「時段方塊」的樣式排列，已滿的變灰色不能點，可預約的用綠色高亮，一目了然。

錯誤三：日期驗證只在後台做，前台沒有即時回饋

客戶選了一個週日，前台不擋，送出後才跳「該日休息，請重新選擇」。這種體驗會讓人非常不爽。所有規則都應該在客戶「選擇的當下」就用視覺化的方式回饋（灰色、不可點、滑鼠變禁止符號），不要等到送出才擋。

六、不同產業的日期選擇器怎麼配

以下整理不同產業常見的日期選擇器配置邏輯，可以作為評估自家官網時的參考：

民宿／飯店／露營區：用日期區間選擇器＋房型排除已訂日期。手機版可連續向下捲三個月。

診所／美業／教練課：用單日＋時段方塊。時段方塊要能即時顯示「還有名額／已滿」。

健檢／體檢中心：單日＋時段方塊，加上「僅平日可預約」的規則。要標註國定假日休。

汽車美容／機車維修：單日＋粗略時段（上午／下午／晚上），因為服務時間長短不固定。

看屋預約／建案接待：單日＋時段方塊。可以加「今天／明天」快速按鈕。

設備租借／攝影棚：日期區間＋每日時段。要能算出「三天兩夜」總費用。

活動報名／講座：不需要日期選擇器，直接列出所有場次讓客戶點。這種反而更快。

結語：日期選擇器是「詢問單流量」的隱形水龍頭

台灣中小企業做官網最容易忽略的三個小元件是：按鈕、表單、日期選擇器。這三個是客戶從「看看」變「行動」的最後三個關卡，任何一個做爛，前面花的所有廣告費、SEO 內容、精美設計，都在最後一步流掉。

如果你的預約表單有日期欄位，請你現在打開手機測試三件事：一，能不能一鍵彈出月曆？二，不能預約的日期有沒有灰掉？三，選完後有沒有清楚顯示你選了哪一天？三個問題只要有一個「沒有」，你的日期選擇器就需要重做。這不是設計上的偏執，是實實在在會影響業績的關鍵。

做官網從來不是把功能塞上去就好。把每一個小元件都當成一次「跟客戶互動的機會」去設計，你的官網才會是一台會賺錢的機器，而不是一張放在網路上的名片。⚡