RollDate

每位開發者都曾經歷過這樣的時刻。

你需要一個日期選擇器，於是開始搜尋。

你找到一個完美解決方案……直到你發現它需要 React。

或是 Vue。

或是 jQuery。

或是為了選幾個日期而導入整個日期函式庫。

嘗試了多種解決方案後，我不斷自問：

為什麼如此常見的 UI 元件，往往比實際需求複雜許多？

於是我決定自己打造一個。

來認識 RollDate。

目標

我並不是要打造「又一個日期選擇器」。

我希望打造出一個我自己也願意在專案中使用的元件。

目標很簡單：

  • 無限捲動
  • 零框架依賴
  • 簡易 API
  • 現代化 UI
  • 支援手機友好捲動
  • TypeScript 支援
  • 易於客製化
  • 完善的說明文件

為什麼選擇捲動？

大多數日期選擇器都依賴點擊小箭頭或下拉選單。

在行動裝置上，這種操作往往很不自然。

我希望能更接近原生手機選單的體驗，只需平順捲動就能切換月份或年份。

這也成為 RollDate 的核心理念之一。

不只是選擇日期

在打造這個元件的過程中，我發現不同專案需要不同的選擇模式。

因此，RollDate 並非維護多個不同的元件，而是內建支援：

  • 單一日期選擇
  • 日期區間選擇
  • 多日期選擇

無論選擇哪種模式，API 都保持一致。

new RollDate("#date", {
    selectType: "range"
});

Enter fullscreen mode Exit fullscreen mode

選用時間選擇器

許多日期選擇器若需時間選擇功能，必須另外安裝外掛。

我希望這項功能內建。

RollDate 支援：

  • 24 小時制
  • 12 小時制（AM/PM）
  • 可調整分鐘間隔

只需一個選項即可啟用。

new RollDate("#date", {
    enableTime: true
});

Enter fullscreen mode Exit fullscreen mode

零依賴

主要設計目標之一就是保持函式庫獨立。

不需 React。

不需 Vue。

不需 jQuery。

不需 Moment.js。

不需 Day.js。

只需純 JavaScript。

這也意味著它幾乎能在任何環境中使用：

  • 純 JavaScript
  • React
  • Vue
  • Angular
  • Svelte
  • Astro
  • ……或任何能使用 DOM 元件的框架。

更佳的開發體驗

我非常重視開發體驗。

這也是為什麼我花在文件上的時間幾乎與元件本身相當。

本專案包含：

  • 互動式即時示範
  • 設定參數遊樂場
  • 自動產生的程式碼範例
  • TypeScript 型別定義
  • 完整說明文件

我特別喜歡的功能之一就是遊樂場。

當你更改選項時，自動產生的 JavaScript 設定也會同步更新，讓你輕鬆理解每個選項的作用。

我的收穫

打造日期選擇器比我原本預期困難許多。

並非因為繪製行事曆很難。

真正的挑戰在於處理各種邊緣案例：

  • 日期區間
  • 禁用日期
  • 在地化
  • 鍵盤與滑鼠互動
  • 時間選擇
  • 不同顯示模式
  • 一致的 API 設計

UI 本身只是工作的一小部分。

成果

RollDate 目前支援：

  • ✅ 單一、區間與多選模式
  • ✅ 彈出式與內嵌模式
  • ✅ 選用時間選擇器
  • ✅ 亮色與暗色主題
  • ✅ 在地化
  • ✅ 執行階段 API
  • ✅ TypeScript
  • ✅ 零依賴

我持續改進這個專案，並真心歡迎其他開發者提供回饋。

如果你有任何建議、想法，或是你會用不同的做法，我很樂意聽聽你的意見。

相關連結

🌐 即時示範：https://rolldate-demo.vercel.app/

📦 npm：https://www.npmjs.com/package/@rolldate/core

⭐ GitHub：https://github.com/Abramov-Front-end/rolldate-core

感謝閱讀！