# @deskpro/react-datepicker-hijri 中文文档

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

版本：1\.5\.3-alpha\.5
npm 元数据更新时间：2026-08-14T13:16:19.576Z
中文译文更新时间：2026-11-12T01:24:38.212Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：416 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：5 个
- peer 依赖：react ^16\.0\.0，moment ^2\.20\.0，react-dom ^16\.0\.0，moment-hijri ^2\.0\.0
- 首次发布：2018-05-02T11:08:10.280Z
- 最新版本发布：2025-05-08T11:28:14.767Z
- 近 30 天下载量：5244（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 0 个）

## 中文简介

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

## 安装

```sh
npm install @deskpro/react-datepicker-hijri
```

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

## README

# 反应取日期器

[![npm version](https://badge.fury.io/js/@deskpro/react-datepicker-hijri.svg)](https://badge.fury.io/js/@deskpro/react-datepicker-hijri) [![Build Status](https://travis-ci.org/deskpro/react-datepicker-hijri.svg?branch=master)](https://travis-ci.org/deskpro/react-datepicker-hijri) [![Dependency Status](https://david-dm.org/deskpro/react-datepicker-hijri.svg)](https://david-dm.org/deskpro/react-datepicker-hijri) [![codecov](https://codecov.io/gh/deskpro/react-datepicker-hijri/branch/master/graph/badge.svg)](https://codecov.io/gh/deskpro/react-datepicker-hijri) [![Downloads](http://img.shields.io/npm/dm/@deskpro/react-datepicker-hijri.svg)](https://npmjs.org/package/@deskpro/react-datepicker-hijri)

用于反应的简单且可重复使用的日期拾取器组件( E)[演示](https://deskpro.github.io/react-datepicker-hijri/)(中文(简体) )

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

## 安装

该软件包可通过国家预防机制安装:

```
npm install @deskpro/react-datepicker-hijri --save
```

您需要安装 `react`, (中文(简体) ), `propTypes`, (中文(简体) ), `moment` 财务报告和审定财务报表 `moment-hijri` 这些依附关系并未包含在套件中。 以下是在反应视图中如何使用 Datepicker 的简单实例 。 您还需要从此软件包中要求 CSS 文件( 或提供您的文件) 。 下面的例子说明,如果您的构建系统支持需要 CSS 文件(Webpack 是一个确实需要的文件),如何将 CSS 从此软件包中包含 .

```js
import React from "react";
import DatePicker from "@deskpro/react-datepicker-hijri";
import moment from "moment-hijri";

import "@deskpro/react-datepicker-hijri/dist/react-datepicker.css";

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

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  render() {
    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
        calendar="hijri"
      />
    );
  }
}
```

## 配置

DatePicker的最基本用途可以用:

```js
<DatePicker selected={this.state.date} onChange={this.handleChange} />
```

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

```js
<DatePicker selected={this.state.date}
  onSelect={this.handleSelect} //when day is clicked
  onChange={this.handleChange} //only when value has changed
/>
```

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

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

### 计时器

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

```js
<DatePicker
  selected={this.state.date}
  onChange={this.handleChange}
  showTimeSelect
  dateFormat="LLL"
/>
```

默认时段将每隔30分钟显示( 默认通过时间Interval proc)

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

### 本地化

摘取日期者依赖 [二. 国际化](http://momentjs.com/docs/#/i18n/) 使其显示组件本地化。 默认情况下,取出日期者会使用即刻设定的全球地块,即英语. 区划可以下列方式变更: 1

-   **全球** 拨打 `moment.locale(lang)`
-   **特定拾取器** 通过提供 `locale` 道具

位置可以随时间而进一步配置,其中包含各种 [定制选项](http://momentjs.com/docs/#/customization/)。 。 。 .

_至0.23版本为止 `weekdays` 财务报告和审定财务报表 `weekStart` DatePicker道具已移除 。 相反,它们可以配置为 `weekdaysMin` 财务报告和审定财务报表 `week.dow` 瞬间本地化定制选项._

## 兼容性

### 反应

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

最新兼容版本:

-   反应15.5或更新:所有以上反应-取日期者 v.0.40.0
-   反应 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

### 浏览器支持

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

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

## 地方发展

这个 `master` 分支包含 Datepicker 组件的最新版本。 要启动你的例子应用程序,你可以运行 `yarn start`。这在 http://localhost:8080 上启动了一个简单的网络服务器.

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

### 实例

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

## 无障碍

### 键盘支持

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

## 许可证

版权 (c) 2017 HackerOne股份有限公司及个人贡献者. 持有麻省理工学院许可证,见 [自由主义](https://npmcn.com/package/%40deskpro/react-datepicker-hijri/LICENSE) 完全许可.

## 常见问题

### @deskpro/react-datepicker-hijri 是什么？

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

### 如何安装 @deskpro/react-datepicker-hijri？

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

### @deskpro/react-datepicker-hijri 支持 TypeScript 吗？

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

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

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

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

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

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

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

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

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