史上最简单的 React Calendar 组件助力业务二开

背景

在中后台业务场景里，日期组件是一个被高频使用的基础组件，除此之外还有，星期、日期时间、时间等各个细粒度的以及变种组件，相互之间单独或者组合使用。

在简单场景下，我们通常直接使用 UI 组件库中的日期选择组件即可实现业务功能，比如下图中 Antd 的 DatePicker 组件

问题

但在一些复杂业务场景下，偏通用化的 UI 组件库难以胜任一些定制功能，一方面是难以去除 UI 组件库提供的特定交互行为，另一方面是提供的扩展能力依旧无法满足部分定制化开发的能力，因此仍旧需要定向开发一个轮子，而这也是 npmjs.com 上存在数以万计 package 的原因了，通用化解决了一部分场景，剩下的靠组件提供的 API，当这部分 API 依旧不能满足时，只能通过造轮子来实现。

rc-calendar-picker 组件

Github: rc-calendar-picker 欢迎 Star，当前全部功能已经实行并可用。

先看一下效果图

为了解决业务场景下的日期选择功能，在调研了第三方开源库之后，决定从 0.5 到 1 实现一个定制化的日期选择组件。

为什么说是从 0.5 开始，因为 react-datetime 的作者已经开源实现了基础的日历模块，这部分的代码完全是可以借鉴的，但这个库已经 3 年多没有更新，issue 也无人维护，当时基于较早的 React 版本进行开发，采用了 Class Component 的写法，因此在阅读了相关源代码后，决定在此基础上进行重构开发。

重构做了 6 件事情

• 代码逻辑梳理

  • 精简 API，保留可扩展的部分
• 历史 Bug 修复
• 基于最新 React 版本开发
• 测试用例覆盖
• 使用 DayJs，减少代码体积
• TS 类型支持

目的是为了满足后续功能迭代，同时避免在原有代码上魔改导致代码质量不可控的情况，因此组件库提供了最原始最基础的 DOM 结构和样式主体，可以自定义渲染其中的模块，也可以调整对应的样式，给予开发者更灵活的二次开发选择权。

入门使用

import Calendar from 'rc-calendar-picker';
import 'rc-calendar-picker/style.css';

/* dayjs 必须引入，并且调用相关插件满足本地化能力 */
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import dayOfYear from "dayjs/plugin/dayOfYear";
import localeData from "dayjs/plugin/localeData";
import localizedFormat from "dayjs/plugin/localizedFormat";
import utc from "dayjs/plugin/utc";

dayjs.extend(utc)
dayjs.extend(localeData)
dayjs.extend(localizedFormat)
dayjs.extend(dayOfYear)

function App() {
  return (
    <Calendar />
  );
}

export default App;

入门 Demo 演示

codesandbox

业务开发

对于一些定制化的功能，如果提供的 API 不能满足客制化的能力，推荐使用这个库的源码进行二次封装，这样保证定制能力的后续迭代效率，毕竟通用化往往能解决的场景比较单一，更推崇开源库提供小巧的解决方案（源码、思路）让开发者更容易做二次开发，而不是无节制地去做冗余式的 API 扩展，提升代码复杂度。

上述效果图是基于 rc-calendar-picker 做的定制化开发，所有功能逻辑、样式可控，交互行为自定义，脱离组件库交互逻辑无法调整的限制，满足了业务功能迭代。

以上是对 rc-calendar-picker 的简单介绍，如果有类似日期组件开发需求的小伙伴，但是一些组件库（Antd 等）无法实现的时候可以考虑使用这个方案，方便满足业务功能需求。