# @contentstack/react-datepicker 中文文档

规范地址：https://npmcn.com/package/%40contentstack/react-datepicker/

版本：4\.25\.7
npm 元数据更新时间：2026-01-06T11:21:02.558Z
中文译文更新时间：2026-11-10T16:55:47.159Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40contentstack/react-datepicker
原文对照：https://npmcn.com/package/%40contentstack/react-datepicker/?lang=original
项目主页：https://github.com/contentstack/venus-react19-forks#readme
源码仓库：https://github.com/contentstack/venus-react19-forks

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：580 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：5 个
- peer 依赖：react ^16\.9\.0 \|\| ^17 \|\| ^18，react-dom ^16\.9\.0 \|\| ^17 \|\| ^18
- 首次发布：2025-04-23T10:51:55.261Z
- 最新版本发布：2026-01-06T11:21:02.326Z
- 近 30 天下载量：7155（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 1 个）

## 中文简介

React 的简单且可重复使用的取日期器组件

## 安装

```sh
npm install @contentstack/react-datepicker
```

也可以使用：`pnpm add @contentstack/react-datepicker`、`yarn add @contentstack/react-datepicker`、`bun add @contentstack/react-datepicker`

## README

# 反应取日期器

[![npm version](https://badge.fury.io/js/react-datepicker.svg)](https://badge.fury.io/js/react-datepicker) [![Test suite](https://github.com/Hacker0x01/react-datepicker/actions/workflows/test.yml/badge.svg)](https://github.com/Hacker0x01/react-datepicker/actions/workflows/test.yml) [![codecov](https://codecov.io/gh/Hacker0x01/react-datepicker/branch/main/graph/badge.svg)](https://codecov.io/gh/Hacker0x01/react-datepicker) [![Downloads](https://img.shields.io/npm/dm/react-datepicker.svg)](https://npmjs.org/package/react-datepicker)

用于反应的简单且可重复使用的日期拾取器组件( E)[演示](https://reactdatepicker.com/)(中文(简体) )

![](https://cloud.githubusercontent.com/assets/1412392/5339491/c40de124-7ee1-11e4-9f07-9276e2545f27.png)

## 安装

软件包可以通过 [无](https://github.com/npm/cli)数字 :

```
npm install react-datepicker --save
```

或者通过 [线条](https://github.com/yarnpkg/yarn)数字 :

```
yarn add react-datepicker
```

您需要分别安装React和propTypes, 因为这些依赖性不包含在软件包中 。 如果您需要使用默认的 en- US 以外的地块, 您也需要从 date- fns 导入到您的工程中( 见下文 localization 一节) 。 以下是在反应视图中如何使用 Datepicker 的简单实例 。 您还需要从此软件包中要求 CSS 文件( 或提供您的文件) 。 下面的例子说明,如果您的构建系统支持需要 CSS 文件(Webpack 是一个确实需要的文件),如何将 CSS 从此软件包中包含 .

```js
import React, { useState } from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};
```

## 配置

DatePicker的最基本用途可以用:

```js
<DatePicker selected={startdate} onChange={(date) => setStartDate(date)} />
```

你用得着 `onSelect` 每次选定日历日期时点火的事件处理器

```js
<DatePicker
  selected={date}
  onSelect={handleDateSelect} //when day is clicked
  onChange={handleDateChange} //only when value has changed
/>
```

`onClickOutside` 处理器对关闭在 `inline` 模式

见 [这里](https://github.com/Hacker0x01/react-datepicker/blob/main/docs/datepicker.md) 用于完整列出可能传递给组件的道具。 现举例说明: [主要网站](https://hacker0x01.github.io/react-datepicker)。 。 。 .

### 计时器

您也可以通过添加 showTimeSelection prop 来包括取时器

```js
<DatePicker
  selected={date}
  onChange={handleDateChange}
  showTimeSelect
  dateFormat="Pp"
/>
```

默认时段将每隔30分钟显示( 默认通过时间Intervals prop可配置)

更多如何使用取时器的例子在 [主要网站](https://hacker0x01.github.io/react-datepicker)

### 本地化

摘取日期者依赖 [国际化](https://date-fns.org/v2.0.0-alpha.18/docs/I18n) 使其显示组件本地化。 默认情况下,取日期者将使用全球地块设定,即英语. 提供3个帮助方法来设置地块:

-   **注册本地** (字符串,对象):从日期-fns上装入导入的地块对象
-   **设置** (字符串):将一个已注册的地块设定为所有摘取日期的默认
-   **获得默认本地**: 返回显示当前设定的默认地块的字符串

```js
import { registerLocale, setDefaultLocale } from  "react-datepicker";
import es from 'date-fns/locale/es';
registerLocale('es', es)

<DatePicker
  locale="es"
/>
```

区划可以如下方式变更:

-   **全球** - 说吧 `setDefaultLocale('es');`

## 兼容性

### 反应

我们一直试图与最新版本的"回放"保持一致. 我们不能支持所有老版本的React.

最新兼容版本:

-   反应16或更新:反应-取日期器 v2.9.4和更新
-   反应 15.5:反应-取日期器 v2.9.3
-   反应 15.4.1:需要React-datepicker v0.40.0,新手不会工作(因为反应-点击出局依赖)
-   React 0.14 或 更新: 全部以上 React-date pickers v0.13.0
-   反应0.13:反应-取日期器 v0.13.0
-   预反应0.13: 反应-取日期器 v0.6.2

### 时刻.js

直到1.8.0版本,这个包一直使用Moment.js. 从v2.0.0开始,我们切换到使用 `date-fns`,它使用本地 Date 对象来缩小包的大小。 如果你从1.8.0改为2.0.0或更高,请参见上文更新的例子: [实例网站](https://reactdatepicker.com/) 用于更新实例.

### 浏览器支持

取枣器与Chrome,Firefox,和IE10+等最新版本相兼容.

不幸的是,在维持我们今后开发新功能的能力的同时,很难支持遗留的浏览器. 对于IE9支持,众所周知 [类列表多填充](https://www.npmjs.com/package/classlist-polyfill) 但它可能在未来的任何时刻改变或中断.

## 地方发展

这个 `main` 分支包含 Datepicker 组件的最新版本.

为开始地方发展:

1.  运行 `yarn link` 从工程根
2.  运行 `cd docs-site && yarn link react-datepicker`
3.  运行 `yarn install` 从工程根
4.  运行 `yarn build` 从工程根
5.  运行 `yarn start` 从工程根

最后一步在http://localhost:30.

你们可以跑 `yarn test` 执行测试套件和linters。 为了帮助您开发组件,我们设置了一些涵盖基本功能的测试(可参见: `/tests`) (中文(简体) ). 虽然我们是测试的大粉丝, 我们强烈建议您在添加新功能时加入测试.

请参考 `CONTRIBUTING.md` 关于设置的更多细节.

### 实例

实例在文件文件夹内托管, 并运行在装入 Datepicker 的简单应用程序中 。 要用新的示例来扩展示例,您可以简单地重复现有的示例之一,并改变您示例的独特属性.

## 无障碍

### 键盘支持

-   _左边_:移动到前一天.
-   _对_:移至次日.
-   _上来_: 移动到前一周.
-   _下来_:移动到下个礼拜.
-   _跳跃_:去上个月.
-   _密码_:去下个月.
-   _内容_: 迁至上年.
-   _结束_:移去来年.
-   _输入/ Esc/标签_: 关闭日历. (Enter & Esc 呼叫防止过失)

#### 为取月者

-   _左边_:去上个月.
-   _对_:去下个月.
-   _输入_: 选择日期并关闭日历

## 许可证

版权 (c) 2014-2023 HackerOne Inc. 及个人贡献. 持有麻省理工学院许可证,见 [自由主义](https://npmcn.com/package/%40contentstack/react-datepicker/LICENSE) 完全许可.

## 常见问题

### @contentstack/react-datepicker 是什么？

React 的简单且可重复使用的取日期器组件

### 如何安装 @contentstack/react-datepicker？

在项目目录运行 npm install @contentstack/react-datepicker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.9\.0 \|\| ^17 \|\| ^18）、react-dom（^16\.9\.0 \|\| ^17 \|\| ^18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @contentstack/react-datepicker 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/contentstack\_\_react-datepicker 是否存在。

### @contentstack/react-datepicker 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @contentstack/react-datepicker 可以商用吗？

@contentstack/react-datepicker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @contentstack/react-datepicker 的下载量有多少？

根据 npm 官方下载统计，@contentstack/react-datepicker 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,155 次，日均约 239 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @contentstack/react-datepicker 还在维护吗？

最新版本 4\.25\.7 发布于 2026/01/06（10 个月前）；至今共发布 5 个版本，其中过去 12 个月发布了 1 个；首次发布于 2025/04/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。