農曆日期選擇器
國曆農曆對照月曆：農曆日、節氣、傳統節日標註，雙曆切換。
國曆農曆對照月曆：每格顯示國曆大字＋農曆小字（初一顯示月名），節氣與傳統節日以色點與籤條標註，頂部可切換國曆／農曆檢視，選中日在底部顯示完整對照（如「丙午年（馬年）五月初五」）。內建 2026 年（丙午馬年）全年對照表，零依賴、免查詢 API。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2
<LunarDatePicker />
安裝
npx shadcn@latest add https://webberui.com/r/lunar-date-picker.json或在 components.json 設定 registries 後，改用 @webberui/lunar-date-picker 安裝。
安裝依賴後，從 registry JSON（/r/lunar-date-picker.json 的 files[0].content）複製 lunar-date-picker.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { LunarDatePicker } from "@/components/ui/lunar-date-picker";
const [date, setDate] = React.useState<Date | null>(new Date(2026, 5, 19));
<LunarDatePicker
value={date}
onChange={(d, lunar) => {
setDate(d);
console.log(lunar.ganzhi, lunar.month, lunar.day); // 丙午 五月 初五
}}
/>;也可直接使用查表函式 getLunarInfo2026(date) 取得任一 2026 年日期的農曆資訊（超出範圍回傳 null）。
資料範圍：內建對照表僅涵蓋國曆 2026-01-01 ～ 2026-12-31（台北時區曆書，含二十四節氣與主要節日）。如需其他年份，依原始碼中相同格式擴充月段資料，或改接 lunar-javascript 等完整曆法庫。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | Date | null | null | 目前選中的日期，需落在 2026 年，否則視為未選取 |
onChange | (date: Date, lunar: LunarInfo) => void | — | 選擇日期時回呼，lunar 含干支年、生肖、農曆月日、節氣與節日 |
year | 2026 | 2026 | 對照表年份；內建資料僅涵蓋 2026 |
defaultMonth | number | 1 | 未提供 value 時預設顯示的月份（1～12） |
className | string | — | 透傳到外層卡片容器 |
LunarInfo 欄位：ganzhi（干支年）、zodiac（生肖）、month（農曆月名）、day（農曆日名）、dayIndex（日序 1～30）、solarTerm?（節氣）、festival?（節日）。
可及性
- 每個日期為原生
button，附完整aria-label（國曆日期＋農曆日＋節日節氣），可用 Tab／Enter 鍵盤操作 - 檢視切換與選中日以
aria-pressed標示狀態，換月按鈕附「上個月／下個月」標籤並在年份邊界停用 - 使用者系統開啟「減少動態效果」時，停用換月滑動、選取彈跳與面板過場動畫，改為即時切換
- 「今天」標記於掛載後才計算，SSR 與客戶端渲染結果一致，不會產生 hydration 錯誤