适用于业务二次开发的 React Calendar 日历组件

noxxxxxx

已于 2024-09-11 16:37:19 修改

阅读量1k

点赞数 29

文章标签： react.js 前端前端框架

于 2024-09-11 16:35:45 首次发布

本文链接：https://blog.csdn.net/chshpamo/article/details/142143542

版权

背景

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

AntD 日历组件

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

日期时间

问题

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

rc-calendar-picker 组件

Github: rc-calendar-picker 欢迎 Star

先看一下效果图

rc-calendar-picker

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

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

重构做了 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;