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。

这意味着它几乎可以在任何环境中运行：

  • Vanilla JavaScript
  • React
  • Vue
  • Angular
  • Svelte
  • Astro
  • ……或任何支持 DOM 组件的框架。

更好的开发者体验

我非常重视开发者体验。

因此，我花在文档上的时间几乎与构建组件本身的时间相当。

项目包含：

  • 可交互的在线演示
  • 配置 Playground
  • 自动生成的代码示例
  • TypeScript 类型定义
  • 完整的文档

我特别喜欢 Playground 这一功能。

当你修改选项时，生成的 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

感谢阅读！