@aerialist7/react-dates

中文文档

21.8.0-patch.7发布于 2026/05/18MITESM + CJS近 30 天下载 6.2万

使用 React 构建的响应和可获取的日期范围拾取器组件

文档目录10 节

现场播放
开始
安装依赖关系
初始化
包含组件
做一些很棒的摘枣人
本地化
高级
接口
他们

反应日期

网易国际化,可访问,可移动方便的取枣图书馆.

react-dates in action

现场播放

关于正在取枣者的例子,请访问 http://airbnb.io/ react-dates (中文(简体) )。。。 .

或

在自己的电脑上运行演示:

克隆此寄存器
npm install
npm run storybook
访问http://localhost:6006/

开始

安装依赖关系

确保通过运行安装正确版本编号的软件包 :

(
  export PKG=react-dates;
  npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g; s/ *//g' | xargs npm install --save "$PKG"
)

生成并运行一个命令,例如:

npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.##

初始化

import 'react-dates/initialize';

截至2000年12月31日的报表 react-dates,本项目依赖 react-with-styles。如果想要继续使用 CSS 样式表和类,则需要一些额外的设置来进行。因此,您需要导入 react-dates/initialize 在我们的组件上设置类名。此导入应位于应用程序的顶端, 因为您无法导入任何 react-dates 组件没有它.

说明: 本构成部分假定 box-sizing: border-box 在您页面的 CSS 中设定全球范围.

包含组件

import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';

网络软件包

使用带有 CSS 加载器的 Webpack, 在您的应用程序中添加以下导入 :

import 'react-dates/lib/css/_datepicker.css';

没有 Web 包 :

创建一个包含内容的 CSS 文件 require.resolve('react-dates/lib/css/_datepicker.css') 并将其纳入您的 html <head> 节.

要看到这个行动,你可以检查出来 https://github.com/majapw/react-dates-demo 页面存档备份,存于互联网档案馆添加 react-dates 在简单的上面 create-react-app 设置.

超过基准等级

默认 react-dates 将使用 PureComponent 有条件的,如果有的话。但是,可以推翻这个设置和使用 Component 财务报告和审定财务报表 shouldComponentUpdate 换句话说也可以在 build/util/baseClass 如果您知道您正在使用反应版本 PureComponent。。。 .

  import React from 'react';
  export default React.PureComponent;
  export const pureComponentAvailable = true;

覆盖样式

现在,最简单的方式去调整 react-dates 以覆盖默认的反应日期样式。例如,您可以创建一个名为 react_dates_overrides.css 带有以下内容( 请在您导入所发文件时确定 app.js后导入 react-dates 样式 :

// 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;
}

这将取代用于突出日历日的背景和文字颜色。您可以使用这种方法默认设置来覆盖日历的任何一面,使其更适合您的特定需要。如果这里没有列出您需要的任何样式, 您总是可以检查每个元素的出处 .

做一些很棒的摘枣人

我们提供一些组件供你们使用。如果你向每个组件提供必需道具,你会得到一个功能齐全的交互式取相器. 加上额外的可选道具,可以自定义输入,日历等的外观和感觉. 你可以看到每个道具在现场演示或探索如何将拾取者妥善包装在示例文件夹。。。 .

日期范围选择器

这个 DateRangePicker 是完全控制的组件,允许用户选择日期范围。您可以控制选中的使用日期 : startDate, (中文(简体) ), endDate,以及 onDatesChange 道具如下所示. 这个 DateRangePicker 内部管理通过打字输入的部分日期的状态(尽管 onDatesChange 在输入日期之前不会触发 (在这样的情况下) 同样,您可以控制哪些输入是焦点和日历可见度(日历是只可见于 focusedInput 与 focusedInput 财务报告和审定财务报表 onFocusChange 道具如下所示.

这是最低的需求设置您需要得到 DateRangePicker 工作时间:

<DateRangePicker
  startDate={this.state.startDate} // momentPropTypes.momentObj or null,
  startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
  endDate={this.state.endDate} // momentPropTypes.momentObj or null,
  endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
  onDatesChange={({ startDate, endDate }) => 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请探索故事书了解每个道具的更多信息.

// 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 工作时间:

<SingleDatePicker
  date={this.state.date} // momentPropTypes.momentObj or null
  onDateChange={date => 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请探索故事书了解每个道具的更多信息.

// 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 工作时间:

<DayPickerRangeController
  startDate={this.state.startDate} // momentPropTypes.momentObj or null,
  endDate={this.state.endDate} // momentPropTypes.momentObj or null,
  onDatesChange={({ startDate, endDate }) => 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 使外表和行为符合你内心的欲望请再次探索故事书了解每个道具的更多信息.

  // 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 是同级依赖关系 react-dates。后者然后使用单一实例 moment 在一个项目中导入的。通过调用来装入一个地块 moment.locale(..) 在其中 moment 输入,并带有本地密钥选择。例如:

moment.locale('pl'); // Polish

然而,这只解决了日期本地化. 为使各组成部分完全国际化, react-dates 定义一定数量的用户界面字符串英文,可通过 phrases 道具(显示故事书页:1 关于无障碍性和可用性问题, 应该翻译所有这些UI元素。。。 .

高级

react-dates 不再严格依赖CSS,而是依赖 react-with-styles ,作为样式如何应用和写作之间的抽象层。上面的指令会让工程从盒子里工作出来,但是还可以做更多的定制.

接口

这个 react-dates/initialize 脚本实际依赖与风格相交的 css 反应在引擎盖下。如果您对项目风格的不同解决方案感兴趣, 您可以自行初始化另一个接口例如,在Airbnb,我们依赖阿佛罗狄忒并因此使用Aphrodite接口 react-with-styles。如果你想这样做,将使用以下模式:

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 并且现在也支持另一种主题方式. 您可以在此文件你将以下列方式推翻他们:

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 接口。如果您想要使用此界面以及主题注册方法,您需要重建核心 _datepicker.css 文档。我们目前不披露构建此文件的实用方法, 但是您可以随同代码一起使用 https://github.com/airbnb/react-dates/blob/master/scripts/buildCSS.js 互联网档案馆的存檔,存档日期2013-12-21 来构建自定义的主题 CSS 文件.

版本与发布记录

@aerialist7/react-dates 共发布 16 个版本，首次发布于 2023/07/25；过去 12 个月发布了 2 个版本。

版本	发布日期	距今
`21.8.0-patch.7`latest	2026/05/18	5 个月前
`21.8.0-patch.6`	2026/05/18	5 个月前
`21.8.0-patch.5`	2024/05/30	2 年前
`21.8.0-patch.4`	2024/05/20	2 年前
`21.8.0-patch.3`	2024/05/20	2 年前
`21.8.0-patch.2`	2024/04/11	2 年前

关于 @aerialist7/react-dates 的常见问题

@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 和提交记录判断。

npm install @aerialist7/react-dates

pnpmpnpm add @aerialist7/react-dates
yarnyarn add @aerialist7/react-dates
bunbun add @aerialist7/react-dates

peer 依赖@babel/runtime ^7.0.0moment ^2.18.1react ^0.14 || ^15.5.4 || ^16.1.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0react-dom ^0.14 || ^15.5.4 || ^16.1.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0react-with-direction ^1.3.1

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

61,561

约 6.2万次日均 2,052 次

统计周期 2026/10/05 – 2026/11/03
数据来自 npm 官方下载统计，2 天前更新

最新版本21.8.0-patch.7发布于 5 个月前

开源许可MIT宽松许可

包体积1.3 MB262 个文件 · 解压后

运行依赖16 个另有 5 个 peer 依赖

模块格式ESM + CJS

TypeScript未声明类型可查找 @types/aerialist7__react-dates

发布版本16 个近 12 个月 2 个

首次发布2023/07/253 年前

元数据更新2026/05/18

每一个软件包背后，
都有分享与创造的人。