# @aerialist7/react-dates 中文文档 规范地址：https://npmcn.com/package/%40aerialist7/react-dates/ 版本：21\.8\.0-patch\.7 npm 元数据更新时间：2026-05-18T12:38:03.816Z 中文译文更新时间：2026-11-05T18:37:42.586Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40aerialist7/react-dates 原文对照：https://npmcn.com/package/%40aerialist7/react-dates/?lang=original 项目主页：https://github.com/aerialist7/react-dates#readme 源码仓库：https://github.com/aerialist7/react-dates ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.3 MB，262 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：16 个 - peer 依赖：@babel/runtime ^7\.0\.0，moment ^2\.18\.1，react ^0\.14 \|\| ^15\.5\.4 \|\| ^16\.1\.1 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0，react-dom ^0\.14 \|\| ^15\.5\.4 \|\| ^16\.1\.1 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0，react-with-direction ^1\.3\.1 - 首次发布：2023-07-25T07:56:33.844Z - 最新版本发布：2026-05-18T12:38:03.699Z - 近 30 天下载量：61561（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：16（近 12 个月 2 个） ## 中文简介 使用 React 构建的响应和可获取的日期范围拾取器组件 ## 安装 ```sh npm install @aerialist7/react-dates ``` 也可以使用：`pnpm add @aerialist7/react-dates`、`yarn add @aerialist7/react-dates`、`bun add @aerialist7/react-dates` ## README # 反应日期 [![Version Badge](http://versionbadg.es/airbnb/react-dates.svg)](https://npmjs.org/package/react-dates) [![Build Status](https://travis-ci.org/airbnb/react-dates.svg)](https://travis-ci.org/airbnb/react-dates) [![dependency status](https://david-dm.org/airbnb/react-dates.svg)](https://david-dm.org/airbnb/react-dates) [![dev dependency status](https://david-dm.org/airbnb/react-dates/dev-status.svg)](https://david-dm.org/airbnb/react-dates#info=devDependencies) [![License](http://img.shields.io/npm/l/react-dates.svg)](https://npmcn.com/package/%40aerialist7/react-dates/LICENSE) [![Downloads](http://img.shields.io/npm/dm/react-dates.svg)](http://npm-stat.com/charts.html?package=react-dates) [![npm badge](https://nodei.co/npm/react-dates.png?downloads=true&stars=true)](https://npmjs.org/package/react-dates) > 网易国际化,可访问,可移动方便的取枣图书馆. ![react-dates in action](https://raw.githubusercontent.com/airbnb/react-dates/master/react-dates-demo.gif) ## 现场播放 关于正在取枣者的例子,请访问 [http://airbnb.io/ react-dates (中文(简体) )](http://airbnb.io/react-dates)。 。 。 . 或 在自己的电脑上运行演示: - 克隆此寄存器 - `npm install` - `npm run storybook` - 访问http://localhost:6006/ ## 开始 ### 安装依赖关系 确保通过运行安装正确版本编号的软件包 : ```sh ( export PKG=react-dates; npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g; s/ *//g' | xargs npm install --save "$PKG" ) ``` 生成并运行一个命令,例如: ```sh npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.## ``` ### 初始化 ```js import 'react-dates/initialize'; ``` 截至2000年12月31日的报表 `react-dates`,本项目依赖 `react-with-styles`。如果想要继续使用 CSS 样式表和类,则需要一些额外的设置来进行。 因此,您需要导入 `react-dates/initialize` 在我们的组件上设置类名。 此导入应位于应用程序的顶端, 因为您无法导入任何 `react-dates` 组件没有它. 说明: 本构成部分假定 `box-sizing: border-box` 在您页面的 CSS 中设定全球范围. ### 包含组件 ```js import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates'; ``` #### 网络软件包 使用带有 CSS 加载器的 Webpack, 在您的应用程序中添加以下导入 : ```js import 'react-dates/lib/css/_datepicker.css'; ``` #### 没有 Web 包 : 创建一个包含内容的 CSS 文件 `require.resolve('react-dates/lib/css/_datepicker.css')` 并将其纳入您的 html `` 节. 要看到这个行动,你可以检查出来 [https://github.com/majapw/react-dates-demo 页面存档备份,存于互联网档案馆](https://github.com/majapw/react-dates-demo) 添加 `react-dates` 在简单的上面 `create-react-app` 设置. #### 超过基准等级 默认 `react-dates` 将使用 `PureComponent` 有条件的,如果有的话。 但是,可以推翻这个设置和使用 `Component` 财务报告和审定财务报表 `shouldComponentUpdate` 换句话说 也可以在 `build/util/baseClass` 如果您知道您正在使用反应版本 `PureComponent`。 。 。 . ```javascript import React from 'react'; export default React.PureComponent; export const pureComponentAvailable = true; ``` #### 覆盖样式 现在,最简单的方式去调整 `react-dates` 以覆盖默认的反应日期样式。 例如,您可以创建一个名为 `react_dates_overrides.css` 带有以下内容( 请在您导入所发文件时确定 `app.js`后导入 `react-dates` 样式 : ```css // NOTE: the order of these styles DO matter // Will edit everything selected including everything between a range of dates .CalendarDay__selected_span { background: #82e0aa; //background color: white; //text border: 1px solid $light-red; //default styles include a border } // Will edit selected date or the endpoints of a range of dates .CalendarDay__selected { background: $dark-red; color: white; } // Will edit when hovered over. _span style also has this property .CalendarDay__selected:hover { background: orange; color: white; } // Will edit when the second date (end date) in a range of dates // is not yet selected. Edits the dates between your mouse and said date .CalendarDay__hovered_span:hover, .CalendarDay__hovered_span { background: brown; } ``` 这将取代用于突出日历日的背景和文字颜色。 您可以使用这种方法默认设置来覆盖日历的任何一面,使其更适合您的特定需要。 如果这里没有列出您需要的任何样式, 您总是可以检查每个元素的出处 . ### 做一些很棒的摘枣人 我们提供一些组件供你们使用。 如果你向每个组件提供必需道具,你会得到一个功能齐全的交互式取相器. 加上额外的可选道具,可以自定义输入,日历等的外观和感觉. 你可以看到每个道具在 [现场演示](http://airbnb.io/react-dates/) 或探索 如何将拾取者妥善包装在 [示例文件夹](https://github.com/airbnb/react-dates/tree/master/examples)。 。 。 . #### 日期范围选择器 这个 `DateRangePicker` 是完全控制的组件,允许用户选择日期范围。 您可以控制选中的 使用日期 : `startDate`, (中文(简体) ), `endDate`,以及 `onDatesChange` 道具如下所示. 这个 `DateRangePicker` 内部管理 通过打字输入的部分日期的状态(尽管 `onDatesChange` 在输入日期之前不会触发 (在这样的情况下) 同样,您可以控制哪些输入是焦点和日历可见度(日历是 只可见于 `focusedInput` 与 `focusedInput` 财务报告和审定财务报表 `onFocusChange` 道具如下所示. 这是最低的 _需求_ 设置您需要得到 `DateRangePicker` 工作时间: ```jsx this.setState({ startDate, endDate })} // PropTypes.func.isRequired, focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null, onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired, /> ``` 以下列出其他 _备选_ 你可以提供道具给 `DateRangePicker` 使外表和行为符合你内心的欲望 所有常数( 以 `ALL_CAPS`)作为指名出口提供 `react-dates/constants`请探索 [故事书](http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) 了解每个道具的更多信息. ```js // input related props startDatePlaceholderText: PropTypes.string, endDatePlaceholderText: PropTypes.string, startDateAriaLabel: PropTypes.string, endDateAriaLabel: PropTypes.string, disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]), required: PropTypes.bool, readOnly: PropTypes.bool, screenReaderInputMessage: PropTypes.string, showClearDates: PropTypes.bool, showDefaultInputIcon: PropTypes.bool, customInputIcon: PropTypes.node, customArrowIcon: PropTypes.node, customCloseIcon: PropTypes.node, inputIconPosition: PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]), noBorder: PropTypes.bool, block: PropTypes.bool, small: PropTypes.bool, regular: PropTypes.bool, // calendar presentation and interaction related props renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string, orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]), anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]), openDirection: PropTypes.oneOf([OPEN_DOWN, OPEN_UP]), horizontalMargin: PropTypes.number, withPortal: PropTypes.bool, withFullScreenPortal: PropTypes.bool, appendToBody: PropTypes.bool, disableScroll: PropTypes.bool, daySize: nonNegativeInteger, isRTL: PropTypes.bool, initialVisibleMonth: PropTypes.func, firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), numberOfMonths: PropTypes.number, keepOpenOnDateSelect: PropTypes.bool, reopenPickerOnClearDates: PropTypes.bool, renderCalendarInfo: PropTypes.func, renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), PropTypes.func, // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node, hideKeyboardShortcutsPanel: PropTypes.bool, // navigation related props navPrev: PropTypes.node, navNext: PropTypes.node, onPrevMonthClick: PropTypes.func, onNextMonthClick: PropTypes.func, onClose: PropTypes.func, transitionDuration: nonNegativeInteger, // milliseconds // day presentation and interaction related props renderCalendarDay: PropTypes.func, renderDayContents: PropTypes.func, minimumNights: PropTypes.number, minDate: momentPropTypes.momentObj, maxDate: momentPropTypes.momentObj, enableOutsideDays: PropTypes.bool, isDayBlocked: PropTypes.func, isOutsideRange: PropTypes.func, isDayHighlighted: PropTypes.func, // internationalization props displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), monthFormat: PropTypes.string, weekDayFormat: PropTypes.string, phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)), dayAriaLabelFormat: PropTypes.string, ``` #### 单约会选择器 这个 `SingleDatePicker` 是一个完全控制的组件,允许用户选择一个单一的日期。 您可以控制选中的 使用日期 `date` 财务报告和审定财务报表 `onDateChange` 道具如下所示. 这个 `SingleDatePicker` 内部管理 通过打字输入的部分日期的状态(尽管 `onDateChange` 在输入日期之前不会触发 (在这样的情况下) 同样,您也可以控制输入是否是焦点(日历可见度也是) 由同一道具控制) `focused` 财务报告和审定财务报表 `onFocusChange` 道具如下所示. 这是最低的 _需求_ 设置您需要得到 `SingleDatePicker` 工作时间: ```jsx this.setState({ date })} // PropTypes.func.isRequired focused={this.state.focused} // PropTypes.bool onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired id="your_unique_id" // PropTypes.string.isRequired, /> ``` 以下列出其他 _备选_ 你可以提供道具给 `SingleDatePicker` 使外表和行为符合你内心的欲望 所有常数( 以 `ALL_CAPS`)作为指名出口提供 `react-dates/constants`请探索 [故事书](http://airbnb.io/react-dates/?selectedKind=SDP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) 了解每个道具的更多信息. ```js // input related props placeholder: PropTypes.string, ariaLabel: PropTypes.string, disabled: PropTypes.bool, required: PropTypes.bool, readOnly: PropTypes.bool, screenReaderInputMessage: PropTypes.string, showClearDate: PropTypes.bool, customCloseIcon: PropTypes.node, showDefaultInputIcon: PropTypes.bool, customInputIcon: PropTypes.node, inputIconPosition: PropTypes.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]), noBorder: PropTypes.bool, block: PropTypes.bool, small: PropTypes.bool, regular: PropTypes.bool, // calendar presentation and interaction related props renderMonthText: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // (month) => PropTypes.string, orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]), anchorDirection: PropTypes.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]), openDirection: PropTypes.oneOf([OPEN_DOWN, OPEN_UP]), horizontalMargin: PropTypes.number, withPortal: PropTypes.bool, withFullScreenPortal: PropTypes.bool, appendToBody: PropTypes.bool, disableScroll: PropTypes.bool, initialVisibleMonth: PropTypes.func, firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), numberOfMonths: PropTypes.number, keepOpenOnDateSelect: PropTypes.bool, reopenPickerOnClearDate: PropTypes.bool, renderCalendarInfo: PropTypes.func, renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node, hideKeyboardShortcutsPanel: PropTypes.bool, daySize: nonNegativeInteger, isRTL: PropTypes.bool, // navigation related props navPrev: PropTypes.node, navNext: PropTypes.node, onPrevMonthClick: PropTypes.func, onNextMonthClick: PropTypes.func, onClose: PropTypes.func, transitionDuration: nonNegativeInteger, // milliseconds // day presentation and interaction related props renderCalendarDay: PropTypes.func, renderDayContents: PropTypes.func, enableOutsideDays: PropTypes.bool, isDayBlocked: PropTypes.func, isOutsideRange: PropTypes.func, isDayHighlighted: PropTypes.func, // internationalization props displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), monthFormat: PropTypes.string, weekDayFormat: PropTypes.string, phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)), dayAriaLabelFormat: PropTypes.string, ``` #### 日选程控制器 这个 `DayPickerRangeController` 是一个只使用日历的版本 `DateRangePicker`。没有输入(也意味着 目前无法访问键盘),日历总是可见的,但您可以选择日期范围的方式与您选择的日期范围大相径庭 `DateRangePicker`。您可以控制选中的 使用日期 : `startDate`, (中文(简体) ), `endDate`,以及 `onDatesChange` 道具如下所示. 类似地,您可以控制哪个输入与 `focusedInput` 财务报告和审定财务报表 `onFocusChange` 道具如下所示. 用户只有在 `focusedInput` 提供. 这是最低的 _需求_ 设置您需要得到 `DayPickerRangeController` 工作时间: ```jsx this.setState({ startDate, endDate })} // PropTypes.func.isRequired, focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null, onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired, initialVisibleMonth={() => moment().add(2, "M")} // PropTypes.func or null, /> ``` 以下列出其他 _备选_ 你可以提供道具给 `DayPickerRangeController` 使外表和行为符合你内心的欲望 请再次探索 [故事书](http://airbnb.io/react-dates/?selectedKind=DayPickerRangeController&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) 了解每个道具的更多信息. ```js // calendar presentation and interaction related props enableOutsideDays: PropTypes.bool, numberOfMonths: PropTypes.number, orientation: ScrollableOrientationShape, withPortal: PropTypes.bool, initialVisibleMonth: PropTypes.func, renderCalendarInfo: PropTypes.func, renderMonthElement: mutuallyExclusiveProps(PropTypes.func, 'renderMonthText', 'renderMonthElement'), // ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node, onOutsideClick: PropTypes.func, keepOpenOnDateSelect: PropTypes.bool, noBorder: PropTypes.bool, // navigation related props navPrev: PropTypes.node, navNext: PropTypes.node, onPrevMonthClick: PropTypes.func, onNextMonthClick: PropTypes.func, transitionDuration: nonNegativeInteger, // milliseconds // day presentation and interaction related props renderCalendarDay: PropTypes.func, renderDayContents: PropTypes.func, minimumNights: PropTypes.number, isOutsideRange: PropTypes.func, isDayBlocked: PropTypes.func, isDayHighlighted: PropTypes.func, // internationalization props monthFormat: PropTypes.string, weekDayFormat: PropTypes.string, phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)), dayAriaLabelFormat: PropTypes.string, /> ``` ## 本地化 [时刻.js](http://momentjs.com/) 是同级依赖关系 `react-dates`。后者然后使用单一实例 `moment` 在一个项目中导入的。 通过调用来装入一个地块 `moment.locale(..)` 在其中 `moment` 输入,并带有 [本地密钥](http://momentjs.com/docs/#/i18n/) 选择。 例如: ```js moment.locale('pl'); // Polish ``` 然而,这只解决了日期本地化. 为使各组成部分完全国际化, `react-dates` 定义一定数量的 [用户界面字符串](https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js) 英文,可通过 `phrases` 道具(显示 [故事书](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=non-english%20locale&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) 页:1 关于无障碍性和可用性问题, **应该翻译所有这些UI元素**。 。 。 . ## 高级 `react-dates` 不再严格依赖CSS,而是依赖 `react-with-styles` ,作为样式如何应用和写作之间的抽象层。 上面的指令会让工程从盒子里工作出来,但是还可以做更多的定制. ### 接口 这个 `react-dates/initialize` 脚本实际依赖 [与风格相交的 css 反应](https://github.com/airbnb/react-with-styles-interface-css) 在引擎盖下。 如果您对项目风格的不同解决方案感兴趣, 您可以自行初始化另一个 [接口](https://github.com/airbnb/react-with-styles/blob/master/README.md#interfaces)例如,在Airbnb,我们依赖 [阿佛罗狄忒](https://github.com/Khan/aphrodite) 并因此使用Aphrodite接口 `react-with-styles`。如果你想这样做,将使用以下模式: ```js import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'; import aphroditeInterface from 'react-with-styles-interface-aphrodite'; import DefaultTheme from 'react-dates/lib/theme/DefaultTheme'; ThemedStyleSheet.registerInterface(aphroditeInterface); ThemedStyleSheet.registerTheme(DefaultTheme); ``` 上述代码必须在任何代码之前运行 `react-dates` 组件已导入。 否则你就会出错 并请注意,如果您手动注册任何自定义接口,您 _必须_ 也手动注册主题. ### 他们 `react-dates` 并且现在也支持另一种主题方式. 您可以在 [此文件](https://github.com/airbnb/react-dates/blob/master/src/theme/DefaultTheme.js) 你将以下列方式推翻他们: ```js import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'; import aphroditeInterface from 'react-with-styles-interface-aphrodite'; import DefaultTheme from 'react-dates/lib/theme/DefaultTheme'; ThemedStyleSheet.registerInterface(aphroditeInterface); ThemedStyleSheet.registerTheme({ reactDates: { ...DefaultTheme.reactDates, color: { ...DefaultTheme.reactDates.color, highlighted: { backgroundColor: '#82E0AA', backgroundColor_active: '#58D68D', backgroundColor_hover: '#58D68D', color: '#186A3B', color_active: '#186A3B', color_hover: '#186A3B', }, }, }, }); ``` 上面的代码将使用绿色的阴影而不是黄色的阴影来显示亮度颜色 `CalendarDay` 组件。 请注意你 _必须_ 如果您手动注册一个主题,则注册接口。 一个不会工作 没有另一个. #### 关于使用 `react-with-styles-interface-css` 默认接口 `react-dates` 与舰船是 [CSS 接口](https://github.com/airbnb/react-with-styles-interface-css)。如果您想要使用此界面以及主题注册方法,您需要重建核心 `_datepicker.css` 文档。 我们目前不披露构建此文件的实用方法, 但是您可以随同代码一起使用 [https://github.com/airbnb/react-dates/blob/master/scripts/buildCSS.js 互联网档案馆的存檔,存档日期2013-12-21](https://github.com/airbnb/react-dates/blob/master/scripts/buildCSS.js) 来构建自定义的主题 CSS 文件. ## 常见问题 ### @aerialist7/react-dates 是什么？ 使用 React 构建的响应和可获取的日期范围拾取器组件 ### 如何安装 @aerialist7/react-dates？ 在项目目录运行 npm install @aerialist7/react-dates，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@babel/runtime（^7\.0\.0）、moment（^2\.18\.1）、react（^0\.14 \|\| ^15\.5\.4 \|\| ^16\.1\.1 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0）、react-dom（^0\.14 \|\| ^15\.5\.4 \|\| ^16\.1\.1 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0）、react-with-direction（^1\.3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @aerialist7/react-dates 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/aerialist7\_\_react-dates 是否存在。 ### @aerialist7/react-dates 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @aerialist7/react-dates 可以商用吗？ @aerialist7/react-dates 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @aerialist7/react-dates 的下载量有多少？ 根据 npm 官方下载统计，@aerialist7/react-dates 在 2026/10/05 – 2026/11/03 这 30 天内被下载 61,561 次，日均约 2,052 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @aerialist7/react-dates 还在维护吗？ 最新版本 21\.8\.0-patch\.7 发布于 2026/05/18（5 个月前）；至今共发布 16 个版本，其中过去 12 个月发布了 2 个；首次发布于 2023/07/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。