# @datepicker-react/hooks 中文文档

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

版本：2\.8\.4
npm 元数据更新时间：2022-04-05T03:03:51.386Z
中文译文更新时间：2026-11-11T15:24:12.893Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：187 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>= 16\.8\.5
- 首次发布：2019-03-31T19:35:40.421Z
- 最新版本发布：2021-10-23T17:11:00.500Z
- 近 30 天下载量：134834（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：37（近 12 个月 0 个）

## 中文简介

复用钩取枣.

## 安装

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

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

## README

# @ datepicker- react/ hooks (英语)

[![Gzip size](https://img.shields.io/bundlephobia/minzip/@datepicker-react/hooks.svg)](https://img.shields.io/bundlephobia/minzip/@datepicker-react/hooks.svg) [![Coverage Status](https://coveralls.io/repos/github/tresko/react-datepicker/badge.svg?branch=master)](https://coveralls.io/github/tresko/react-datepicker?branch=master) [![Build Status](https://travis-ci.org/tresko/react-datepicker.svg?branch=master)](https://travis-ci.org/tresko/react-datepicker) [![Netlify Status](https://api.netlify.com/api/v1/badges/9b144788-65aa-4c1d-9748-75200d5a7fb7/deploy-status)](https://app.netlify.com/sites/datepicker-react/deploys)

[![NPM](https://nodei.co/npm/@datepicker-react/hooks.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/@datepicker-react/hooks?downloads=true&downloadRank=true&stars=true)

## 开始

### 安装

```sh
yarn add @datepicker-react/hooks
```

### 包含钩子

```js
import {useDatepicker, useMonth, useDay} from '@datepicker-react/hooks'
```

### [示例(编码框)](https://codesandbox.io/s/datepickerreacthooks-example-06dxk)

## 文章

-   [在 10 分钟内创建自定义的 React 日期拾取器](https://tresko.dev/create-a-custom-react-date-picker-in-10-minutes)

## `useDatepicker`

这个 `useDatepicker` 钩子返回函数如 `goToPreviousMonths`, (中文(简体) ), `goToNextMonths`等,哪些 允许我们控制取枣者.

### `useDatepickerProps`

#### `onDatesChange: (data: OnDatesChangeProps) => void`

选定日期时触发回调( N)`onDaySelect`) (中文(简体) ).

#### `minBookingDate: Date | undefined`

如果设置了道具, 那么所有日期之前 `minBookingDate` 已禁用.

#### `maxBookingDate: Date | undefined`

如果设置了道具, 那么所有日期 : `maxBookingDate` 已禁用.

#### `startDate: Date | null`

当前开始日期 .

#### `endDate: Date | null`

目前结束日期.

#### `focusedInput: 'startDate' | 'endDate' | null`

目前的重点日期.

#### `numberOfMonths: number | undefined (Default: 2)`

可见月数.

#### `minBookingDays: number | undefined (Default: 1)`

允许的最低日期范围为天数.

#### `exactMinBookingDays: boolean | undefined (Default: false)`

若为 `exactMinBookingDays` 实值 `true`,那么日期范围总是与 `minBookingDays`。 。 。 .

#### `firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6 (Default: 1 - Monday)`

礼拜一日.

#### `initialVisibleMonth? Date`

初始可见月份

#### `isDateBlocked: (date: Date) => boolean`

若为 `isDateBlocked` 返回时 `true`,则日期被屏蔽.

#### `changeActiveMonthOnSelect?: boolean`

如果这是虚假的, 活动月面板在选择开始日期时不会更改 .

### `unavailableDates?: Date[]`

在数组中接收无法使用的日期 .

### `useDatepickerResult`

#### `firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6`

礼拜一日.

#### `activeMonths: ({year: number, month: number})[]`

`Array` 可见的月份。 每月是一个包含 `year` 财务报告和审定财务报表 `month`。 。 。 .

#### `numberOfMonths: number`

`Number` 可见的月份.

#### `focusedDate: Date | null`

专注日期.

#### `isDateSelected: (date: Date) => boolean`

回返 `true` 如果选定日期或选定范围内的日期,否则 `false`。 。 。 .

#### `isDateHovered: (date: Date) => boolean`

回返 `true` 如果一个日期被徘徊, 否则 `false`。 。 。 .

#### `isDateBlocked: (date: Date) => boolean`

回返 `true` 如果日期被封锁,否则 `false`。 。 。 .

#### `isDateFocused: (date: Date) => boolean`

回返 `true` 如果一个日期被聚焦,否则 `false`。 。 。 .

#### `isFirstOrLastSelectedDate: (date: Date) => boolean`

回返 `true` 如果一个日期是选定范围内的第一个或最后一个日期,否则 `false`。 。 。 .

#### `isStartDate: (date: Date) => boolean`

回返 `true` 如果一个日期是选定范围内的第一个或最后一个日期,否则 `false`。 。 。 .

#### `isEndDate: (date: Date) => boolean`

回返 `true` 如果一个日期是选定范围内的第一个或最后一个日期,否则 `false`。 。 。 .

#### `onResetDates: () => void`

重置起止日期 .

#### `onDateHover: (date: Date) => void`

内部设置 `hovered` 状态.

#### `onDateSelect: (date: Date) => void`

选择日期。 选择哪个日期,取决于 `focusedInput`。 。 。 .

#### `onDateFocus: (date: Date) => void`

设定 `focusedDate`。 。 。 .

#### `goToDate: (date: Date) => void`

更新 `activeMonths` 具体日期.

#### `goToNextMonths: () => void`

更新 `activeMonths` (下个月) `numberOfMonths` 道具 (英语).

#### `goToNextMonthsByOneMonth: () => void`

更新 `activeMonths` (后数月)取一月.

#### `goToPreviousMonths: () => void`

更新 `activeMonths` (前几个月) `numberOfMonths` 道具 (英语).

#### `goToPreviousMonthsByOneMonth: () => void`

更新 `activeMonths` (前数月)取一月.

#### `goToPreviousYear: (numYears: number = 1) => void`

默认转入上一年.

#### `goToNextYear: (numYears: number = 1) => void`

到来年默认.

## `useMonth`

这个 `useMonth` 返回月份的所有天数、工作日标签和月份标签.

### `useMonthProps`

#### `year`

年份

#### `month`

月数

#### `firstDayOfWeek: number | undefined (Default: 1)`

礼拜一日.

#### `dayLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'MMMM yyyy'))`

格式化日标签.

#### `weekdayLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'eeeeee'))`

格式化工作日标签.

#### `monthLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'dd'))`

格式月标签.

### `useMonthResult`

#### `days: ({date: Date, dayLabel: string})[]`

`Array` 日用对象。 每个对象包含 `date` 财务报告和审定财务报表 `dayLabel`。 。 。 .

#### `weekdayLabels: (string)[]`

`Array` 工作日标签.

#### `monthLabel: string`

月标签.

## `useDay`

### `useDayProps`

#### `date: Date`

日期

#### `dayRef: React.RefObject<HTMLButtonElement>`

`Ref` 一天的按钮.

#### [`focusedDate: Date | null`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-focuseddate-date--null)

#### [`isDateFocused: (date: Date) => boolean`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-isdatefocused-date-date--boolean)

#### [`isDateSelected: (date: Date) => boolean`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-isdateselected-date-date--boolean)

#### [`isDateHovered: (date: Date) => boolean`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-isdatehovered-date-date--boolean)

#### [`isDateBlocked: (date: Date) => boolean`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-isdateblocked-date-date--boolean-1)

#### [`isFirstOrLastSelectedDate: (date: Date) => boolean`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-isfirstorlastselecteddate-date-date--boolean)

#### [`onDateFocus: (date: Date) => void`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-ondatefocus-date-date--void)

#### [`onDateSelect: (date: Date) => void`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-ondateselect-date-date--void)

#### [`onDateHover: (date: Date) => void`](https://npmcn.com/package/%40datepicker-react/hooks/#readme-ondatehover-date-date--void)

### `useDayResult`

#### `tabIndex: 0 | -1`

`tabIndex` 将按钮传递到白天 `tabIndex`。 。 。 .

#### `onKeyDown: (e: KeyboardEvent) => void`

`onKeyDown` 调用可以传递到当天按钮 `onKeyDown`。 。 。 .

#### `onClick: () => void`

`onClick` 调用到当天按钮 `onClick`。 。 。 .

#### `onMouseEnter: () => void`

`onMouseEnter` 调用到当天按钮 `onMouseEnter`。 。 。 .

#### `disabledDate: boolean`

若为 `true`,则日期被禁用.

#### `isWithinHoverRange: boolean`

若为 `true`,则日期在徘徊范围内.

#### `isSelectedStartOrEnd: boolean`

若为 `true`,然后该日期是第一个或最后一个选定的日期.

#### `isSelected: boolean`

若为 `true`,然后选择日期.

## 谁用

[生命史记](https://lifeonscreen.com/)  
[@ datepicker- react/ styled (已删除)](https://github.com/tresko/react-datepicker/tree/master/packages/styled)

## 许可证

获得麻省理工学院许可,版权为2019年至今的Miha Sedej.

见 [自由主义](https://github.com/tresko/react-datepicker/blob/master/LICENSE) 更多信息.

  

[![Buy me a coffee](https://camo.githubusercontent.com/031fc5a134cdca5ae3460822aba371e63f794233/68747470733a2f2f7777772e6275796d6561636f666665652e636f6d2f6173736574732f696d672f637573746f6d5f696d616765732f6f72616e67655f696d672e706e67)](https://www.buymeacoffee.com/T1Eu7XSoF)

## 常见问题

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

复用钩取枣\.

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

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

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

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

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

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

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

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

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

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

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

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