# @atefbena/react-date-range 中文文档 规范地址：https://npmcn.com/package/%40atefbena/react-date-range/ 版本：1\.0\.4 npm 元数据更新时间：2022-04-04T16:03:02.054Z 中文译文更新时间：2026-11-07T01:53:33.978Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40atefbena/react-date-range 原文对照：https://npmcn.com/package/%40atefbena/react-date-range/?lang=original 项目主页：https://github.com/atefBB/react-date-range#readme 源码仓库：https://github.com/atefBB/react-date-range ## 关键信息（来自 npm 元数据） - 包体积（解压后）：294 kB，90 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：4 个 - peer 依赖：date-fns 2\.0\.0-alpha\.7 \|\| \>=2\.0\.0，react ^0\.14 \|\| ^15\.0\.0-rc \|\| \>=15\.0 - 首次发布：2021-11-05T07:58:49.253Z - 最新版本发布：2021-11-08T14:07:16.227Z - 近 30 天下载量：5236（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：5（近 12 个月 0 个） ## 中文简介 用于选择日期和日期范围的反应组件. ## 安装 ```sh npm install @atefbena/react-date-range ``` 也可以使用：`pnpm add @atefbena/react-date-range`、`yarn add @atefbena/react-date-range`、`bun add @atefbena/react-date-range` ## README # @ atefbena/ react- date- rang ### 伟大的叉子 `react-date-range` 软件包 [![npm](https://img.shields.io/npm/v/react-date-range)](https://www.npmjs.com/package/@atefbena/react-date-range) ![npm](https://img.shields.io/npm/l/@atefbena/react-date-range) [![npm](https://img.shields.io/npm/dw/react-date-range)](https://www.npmjs.com/package/@atefbena/react-date-range) 用于选择日期和日期范围的日期库不可知反应组件 。 用途 [日期 - fns](http://date-fns.org/) 日期操作. ### 为什么要用 `@atefbena/react-date-range`? 吗? - 无国籍日期业务 - 高度可配置 - 多范围选择 - 根据当地js日期 - 拖放选择 - 键盘友好 **现场直播:** [http://hypeserver.github.io/反应-日期-距离](http://hypeserver.github.io/react-date-range) ## 开始 ### 安装 ``` yarn add @atefbena/react-date-range ``` 此插件预期 `react` 财务报告和审定财务报表 `date-fns` 作为对等的依赖, 这意味着您需要在您的工程文件夹中安装它们 . ``` yarn add react date-fns ``` ## 使用量 您需要先导入骨架和主题样式 . ```javascript import '@atefbena/react-date-range/dist/styles.css'; // main style file import '@atefbena/react-date-range/dist/theme/default.css'; // theme css file ``` ### `DatePicker` ```javascript import { Calendar } from '@atefbena/react-date-range'; function MyComponent() { function handleSelect(date) { console.log(date); // native Date object } return ( ); } ``` ### `DateRangePicker / DateRange` ```javascript import { DateRangePicker } from '@atefbena/react-date-range'; function MyComponent() { function handleSelect(ranges) { console.log(ranges); // { // selection: { // startDate: [native Date Object], // endDate: [native Date Object], // label: [string] // selected range label // } // } } const selectionRange = { startDate: new Date(), endDate: new Date(), key: 'selection', } return ( ) } ``` ### 选项 | 财产 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | 语言 | 对象 | 来自本地的 enUS | 您可以从 [这里](https://github.com/hypeserver/react-date-range/tree/next/src/locale/index.js)。直接导出自 [`date-fns/locales`](https://date-fns.org/docs/I18n#supported-languages)。 。 。 . | | 类Name | 字符串 | | 包装类名 | | 月数 | 数目 | 1个 | 每月计数 | | 显示选择 预览 | 布尔 | 真实 | 在有重点/覆盖的日期显示预览 | | 显示月与年 | 布尔 | 真实 | 在日历顶部显示月和年的选中标记, 如果错误的话, 它只会显示月和年 | | 颜色 | 字符串 \[\] | | 定义选择预览的颜色. | | 显示日期 | 日期 | | 初始重点日期 | | 约会 | 日期 | | 定义最小日期。 已禁用较早的日期 | | 最大日期 | 日期 | | 定义最长日期。 已禁用日期 | | 方向 | 字符串 | "纵向" | 日历月方向。 可能会是 `vertical` 或者说 `horizontal` | | 禁用数据 | 日期\[\] | \[ | 已禁用的日期 | | 禁用日 | 种子 | | 禁用 day fn( 日期: 日期) | | 滚动 | 对象 | {已启用: 假} | 无限滚动行为配置。 检查出来 [无限滚动](https://npmcn.com/package/%40atefbena/react-date-range/#readme-infinite-scrolled-mode) 节 | | 显示月线箭头 | 布尔 | 真实 | 显示/隐藏月箭头按钮 | | 导航器 | 种子 | | 聚焦日期导航区的渲染器。 fn(当前FocusedDate:日期,变化显示 Date: func,道具:对象) | | 范围 | 目标 | \[ | 定义范围。 范围对象数组 | | 移动 Range 首选( 日期) | 布尔 | 虚假 | 启动时移动范围 Date 选择 。 否则,结束日期将替换为起始日期,除非 `retainEndDateOnFirstSelection` 被设定为真实. | | 保留 EndDate 在第一次选中( 日期) | 布尔 | 虚假 | 保留起始日期变更时的结束日期,除非起始日期晚于结束日期. 如果 `moveRangeOnFirstSelection` 被设定为真实. | | 变化( Calendar) | 种子 | | 日期更改的回调函数。 fn( 日期: 日期) | | 变化( 日期) | 种子 | | 区域变化的回调函数。 fn(变化)。 更改包含带有新内容的已更改区域 `startDate`编号 :`endDate` 属性. | | 颜色( 日历) | 字符串 | `#3d91ff` | 定义日历中选定日期的颜色 | | 日期( 日历) | 日期 | | 日历的日期值 | | 显示 DateDisplay( 日期) | 布尔 | 真实 | 显示/隐藏选择的显示行。 用途 `dateDisplayFormat` 用于主题 | | 在ShownDateChange(日期、卡伦达尔)上 | 函数 | | 当显示日期更改时调用回调函数 | | 初始指定区域( 日期) | 对象 | | 焦距初始值. 见 `focusedRange` 用于使用. | | 焦距( 日期) | 对象 | | 它定义了哪个范围和步骤是焦点. 常见的初始值是 `[0, 0]`;第一个值是范围索引,第二个值是日期范围(起始日期或结束日期)的哪个步骤. | | 位于 RangFocusChange( 日期距离) 上 | 对象 | | 焦点更改的召回功能 | | 预览( 日期范围) | 对象 | | 显示预览范围并覆盖 Date Range 的默认预览。 预期形状 : `{ startDate: Date, endDate: Date, color: String }` | | 显示审查( 日期范围) | 嘘 | 真实 | 预览的能见度 | | 可编辑数据输入( Calendar) | 嘘 | 虚假 | 是否可以在日历输入字段中编辑日期 | | 拖曳选择可启用( Calendar) | 嘘 | 真实 | 是否可以通过拖放 n 来选择日期 | | 日历焦点( Calendar) | 字符串 | 前进 | 日历焦点月应该是由前向驱动还是由后向驱动. 可以是“ 前向” 或“后向” | | 防止SnapRe焦点( 日历) | 嘘 | 虚假 | 防止对所显示范围重新确定对选择的无意关注 | | 预览变化( 日期) | 对象 | | 预览更改的召回功能 | | 日期列表格式 | 字符串 | `MMM d, yyyy` | 选定区域预览。 检查出来 [date-fns 格式选项](https://date-fns.org/docs/format) | | 日记格式 | 字符串 | `d` | 选定区域预览。 检查出来 [date-fns 格式选项](https://date-fns.org/docs/format) | | 工作日播放格式 | 字符串 | `E` | 选定区域预览。 检查出来 [date-fns 格式选项](https://date-fns.org/docs/format) | | 月播放格式 | 字符串 | `MMM yyyy` | 选定区域预览。 检查出来 [date-fns 格式选项](https://date-fns.org/docs/format) | | 每周启动 | 数目 | | 是否来自该地块的周起日将被覆盖 。 默认值来自您的地语, 如果没有指定地语, 请注意默认地语是 enUS | | 启动 Date 定位符 | 字符串 | `Early` | 开始日期占位符 | | 日期定位符 | 字符串 | `Continuous` | 结束日期占位符 | | 固定高度 | 布尔 | 虚假 | 由于有些月份需要不到6行显示,通过设置这个道具,可以强制6行所有月份. | | 渲染出自流标( S)`DefinedRange`(中文(简体) ) | 函数 | | 为静态范围配置触发的召回功能 `hasCustomRendering: true` 在他们身上。 而非渲染 `staticRange.label`中,此调用值将返回. | | 静态区域( R)`DefinedRange`, (中文(简体) ), `DateRangePicker`(中文(简体) ) | 阵列 | [默认定义区域](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js) | \- 说吧 | | 输入区域( R)`DefinedRange`, (中文(简体) ), `DateRangePicker`(中文(简体) ) | 阵列 | [默认输入范围](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js) | \- 说吧 | | 离子标签 | 对象 | {} | 在内部元素中插入 aria- 标签 | | 每日管理员 | 函数 | 无效 | 用于自定义日历日的渲染功能。 给定的日期应该返回要渲染的内容 . | \* 范围形状: ```js { startDate: PropTypes.object, endDate: PropTypes.object, color: PropTypes.string, key: PropTypes.string, autoFocus: PropTypes.bool, disabled: PropTypes.bool, showDateDisplay: PropTypes.bool, } ``` \*\* 等离子层: ```js { // The key of dateInput should be same as key in range. dateInput: PropTypes.objectOf( PropTypes.shape({ startDate: PropTypes.string, endDate: PropTypes.string }) ), monthPicker: PropTypes.string, yearPicker: PropTypes.string, prevButton: PropTypes.string, nextButton: PropTypes.string, } ``` #### 无限滚动模式 启用无限滚动集 `scroll={{enabled: true}}` 基本来说 无限滚动特性受到以下因素的影响: `direction`(几个月后服从指示)和 `months`(数出数月) 道具直接. 如果您喜欢, 您可以覆盖日历大小 `calendarWidth`编号 :`calendarHeight` 或每个月的高度/宽度 `monthWidth`编号 :`monthHeight`编号 :`longMonthHeight` 时间 `scroll` 道具 (英语). ```js // shape of scroll prop scroll: { enabled: PropTypes.bool, monthHeight: PropTypes.number, longMonthHeight: PropTypes.number, // some months has 1 more row than others monthWidth: PropTypes.number, // just used when direction="horizontal" calendarWidth: PropTypes.number, // defaults monthWidth * months calendarHeight: PropTypes.number, // defaults monthHeight * months }), ``` ### 发布工作流程 - 将所有需要放入的软件合并到主机 - 打开一个新的发布 PR 而不是 : - 将版本压缩到合适的 < new version > - 更新 ChangeGelog.md - 确保演示和重要功能能如期发挥 - 合并后,标记主输入 `release/` 让Github Action 处理出版 - \= 利润 = ### 切换方式 - 方便移动( 集成自来水和刷取动作) - 添加测试 - 改进文件编制 - 移动到打字符 ## 常见问题 ### @atefbena/react-date-range 是什么？ 用于选择日期和日期范围的反应组件\. ### 如何安装 @atefbena/react-date-range？ 在项目目录运行 npm install @atefbena/react-date-range，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：date-fns（2\.0\.0-alpha\.7 \|\| \>=2\.0\.0）、react（^0\.14 \|\| ^15\.0\.0-rc \|\| \>=15\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @atefbena/react-date-range 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/atefbena\_\_react-date-range 是否存在。 ### @atefbena/react-date-range 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @atefbena/react-date-range 可以商用吗？ @atefbena/react-date-range 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @atefbena/react-date-range 的下载量有多少？ 根据 npm 官方下载统计，@atefbena/react-date-range 在 2026/10/07 – 2026/11/05 这 30 天内被下载 5,236 次，日均约 175 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @atefbena/react-date-range 还在维护吗？ 最新版本 1\.0\.4 发布于 2021/11/08（4 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/11/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。