Design SystemComponentsDatePicker

DatePicker

Installation

import { DatePicker } from "@olab/components";

Overview

日期選擇器：點輸入框展開月曆，選一天就填回去。開 enableTime 時，月曆旁多一個時間選擇區，底部有 Cancel / Confirm。

輸入框是膠囊形細邊框，月曆打開時外框轉品牌色。日期格是 36px 圓形：選中填品牌色，今天下方有一個品牌色小點。

Interactive Demo

CLICK THE INPUT — pick a date from the calendar

value = ""

State Matrix

INPUT — default / disabled (real component)

default
disabled

INPUT · open (sim) — border turns brand while the calendar is open

DAY CELL — static replica, each state forced on

12default
12hover (sim)
12selected
12selected · hover (sim)
26today
26today · selected
30disabled

Examples

WITH TIME — enableTime adds a time picker + Cancel / Confirm

value = ""

Spec

PartValueSource class
Input膠囊形，1px 細邊框，內距 8px，14px 字rounded-full border border-secondary p-2 text-bodyM
Input · open外框轉品牌色data-[state=open]:border-[var(--color-bg-brand-solid)]
Input · disabled50% 不透明度opacity-50 cursor-not-allowed
Popup最小寬 328px，20px 圓角，內距 16pxmin-w-[328px] rounded-2xl border bg-primary · p-4
Day cell36px 圓形h-9 w-9 rounded-full
Day · hover淡底hover:bg-secondary
Day · selected品牌色底；hover 轉 hover 階data-[selected]:bg-brand-solid → hover:bg-brand-solid-hover
Day · today下方 4px 品牌色圓點（選中時轉高對比色）data-[today]:after:bg-brand-solid
Day · disabled淡字，沒有 hoverdata-[disabled]:text-quaternary
Month / year cell40px / 48px 圓形h-10 w-10 / h-12 w-12 rounded-full

數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/date-picker.md。

Usage

Do

  • 需要選一個具體日期時用：結算日、篩選起訖、排程。
  • 需要精確到時分（例如開盤時間）才開 enableTime。
  • placeholder 寫成要選的是什麼（Select a date）。

Don't

  • 不要拿來選相對時間（7 天內、30 天內）；那用 Select 或一排 Button 更快。
  • 不要用 className 改今天的小點或選中色；日期格的樣子由元件決定。
  • 不要讓使用者在不能選的日期上猜；超出範圍的日期應該停用。