# @datepicker-react/styled 中文文档

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

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

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

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

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

- 包体积（解压后）：353 kB，83 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>= 16\.8\.5，styled-components \>= 4\.0\.0
- 首次发布：2019-04-02T10:29:36.189Z
- 最新版本发布：2021-10-23T17:11:02.278Z
- 近 30 天下载量：26462（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 0 个）

## 中文简介

带有有风格组件的回放取枣器建筑 .

## 安装

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

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

## README

# @ datepicker- react/ styled (已删除)

[![Gzip size](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.svg)](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.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/styled.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/@datepicker-react/styled?downloads=true&downloadRank=true&stars=true)

> 建立一个易于国际化、可访问、便于移动的网络取枣图书馆 有风格的组件.

![example](https://github.com/tresko/react-datepicker/raw/master/docs/datepicker.gif)

## 现场播放

关于正在取枣者的例子,请访问 [https://datepicker-react.netlify.com/ 页面存档备份,存于互联网档案馆](https://datepicker-react.netlify.com/)。 。 。 .

或

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

-   克隆此寄存器
-   `yarn install && bootstrap`
-   `yarn storybook`
-   访问http://localhost:6006/

## 开始

### 安装

```sh
yarn add @datepicker-react/styled styled-components
```

### 包含组件

```js
import {DateRangeInput, DateSingleInput, Datepicker} from '@datepicker-react/styled'
```

### 日期距离输入

这个 `DateRangeInput` 是完全控制的组件,允许用户选择日期范围。 你个 能够使用 `startDate`, (中文(简体) ), `endDate`,以及 `onDatesChange` 显示的道具 见下文。 同样,您可以控制哪些输入是焦点和日历可见度(例如: 日历仅在 `focusedInput` 与 `focusedInput` 财务报告和审定财务报表 `onFocusChange` 道具如下所示.

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

**不支持 IE11**

```jsx
import React, {useReducer} from 'react'
import {DateRangeInput} from '@datepicker-react/styled'

const initialState = {
  startDate: null,
  endDate: null,
  focusedInput: null,
}

function reducer(state, action) {
  switch (action.type) {
    case 'focusChange':
      return {...state, focusedInput: action.payload}
    case 'dateChange':
      return action.payload
    default:
      throw new Error()
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <DateRangeInput
      onDatesChange={data => dispatch({type: 'dateChange', payload: data})}
      onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
      startDate={state.startDate} // Date or null
      endDate={state.endDate} // Date or null
      focusedInput={state.focusedInput} // START_DATE, END_DATE or null
    />
  )
}
```

以下列出其他 _备选_ 你可以提供道具给 `DateRangeInput` 改为 将外表和行为定制为心愿.

```ts
displayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'
phrases?: DateRangeInputPhrases
showStartDateCalendarIcon?: boolean // Default: true
showEndDateCalendarIcon?: boolean // Default: true
onClose?(): void
vertical?: boolean // Default: false
showResetDates?: boolean // Default: true
showSelectedDates?: boolean // Default: true
showClose?: boolean // Default: true
rtl?: boolean // Default: false
placement?: 'top' | 'bottom' // Default: bottom
unavailableDates?: Date[] // Default: []
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 1
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
startDateInputId?: string
endDateInputId?: string
```

### 摘取日期者

这个 `Datepicker` 是完全控制的组件,允许用户选择日期范围。 你们可以 使用 `startDate`, (中文(简体) ), `endDate`,以及 `onDatesChange` 显示的道具 见下文。 类似地,您可以控制哪个输入与 `focusedInput` 道具 (英语).

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

**不支持 IE11**

```jsx
import React, {useState} from 'react'
import {Datepicker, START_DATE} from '@datepicker-react/styled'

function App() {
  const [state, setState] = useState({
    startDate: null,
    endDate: null,
    focusedInput: START_DATE,
  })

  function handleDatesChange(data: OnDatesChangeProps) {
    if (!data.focusedInput) {
      setState({...data, focusedInput: START_DATE})
    } else {
      setState(data)
    }
  }

  return (
    <Datepicker
      onDatesChange={handleDatesChange}
      startDate={state.startDate} // Date or null
      endDate={state.endDate} // Date or null
      focusedInput={state.focusedInput} // START_DATE, END_DATE or null
    />
  )
}
```

以下列出其他 _备选_ 你可以提供道具给 `Datepicker` 要自定义 外表和行为符合你内心的欲望.

```ts
phrases?: DatepickerPhrases
displayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'
onClose?(): void
showResetDates?: boolean // Default: true
showSelectedDates?: boolean // Default: true
showClose?: boolean // Default: true
vertical?: boolean // Default: false
rtl?: boolean // Default: false
unavailableDates?: Date[] // Default: []
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 0
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
```

### 日期单输入

这个 `DateSingleInput` 是一个完全控制的组件,允许用户选择日期。 你们可以 使用 `date` 财务报告和审定财务报表 `onDateChange` 道具如下所示. 同样,你 能够控制日历的能见度(日历仅在 `showDatepicker` 实值 `true`与 页:1 `showDatepicker` 财务报告和审定财务报表 `onFocusChange` 道具如下所示.

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

**不支持 IE11**

```jsx
import React, {useReducer} from 'react'
import {DateSingleInput} from '@datepicker-react/styled'

const initialState = {
  date: null,
  showDatepicker: false,
}

function reducer(state, action) {
  switch (action.type) {
    case 'focusChange':
      return {...state, showDatepicker: action.payload}
    case 'dateChange':
      return action.payload
    default:
      throw new Error()
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <DateSingleInput
      onDateChange={data => dispatch({type: 'dateChange', payload: data})}
      onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
      date={state.date} // Date or null
      showDatepicker={state.showDatepicker} // Boolean
    />
  )
}
```

以下列出其他 _备选_ 你可以提供道具给 `DateSingleInput` 改为 将外表和行为定制为心愿.

```ts
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number
firstDayOfWeek?: FirstDayOfWeek
displayFormat?: string | FormatFunction
phrases?: DateSingleInputPhrases
showCalendarIcon?: boolean
vertical?: boolean
showResetDate?: boolean
showClose?: boolean
rtl?: boolean
placement?: 'top' | 'bottom'
unavailableDates?: Date[] // Default: []
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
onClose?(): void
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
inputId?: string
```

### 他们

`@datepicker-react/styled` 支持带有样式组件的主题 `ThemeProvider` 财务报告和审定财务报表 `Styled System` 主题样式.

```jsx
<ThemeProvider
  theme={{
    breakpoints: ['32em', '48em', '64em'],
    reactDatepicker: {
      daySize: [36, 40],
      fontFamily: 'system-ui, -apple-system',
      colors: {
        accessibility: '#D80249',
        selectedDay: '#f7518b',
        selectedDayHover: '#F75D95',
        primaryColor: '#d8366f',
      },
    },
  }}
>
  ...
</ThemeProvider>
```

-   [查看所有主题道具](https://npmcn.com/package/docs/THEME_PROPS.md)
-   [代码框示例](https://codesandbox.io/s/theming-datepicker-reactstyled-42pdb?fontsize=14)

## 如何建造自己的取枣机?

很简单 使用 [反应钩 (@ datepicker- react/ hooks)](https://github.com/tresko/react-datepicker/tree/master/packages/hooks)。 。 。 .

## 谁用

[生命史记](https://lifeonscreen.com/)

## 文章

-   [反应中的另一个取枣者](https://tresko.dev/yet-another-datepicker-in-react)
-   [Theming 反应取枣者](https://tresko.dev/theming-react-datepicker-datepicker-react-styled)
-   [在 10 分钟内创建自定义的 React 日期拾取器](https://tresko.dev/create-a-custom-react-date-picker-in-10-minutes)

## 许可证

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

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

  

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

## 常见问题

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

带有有风格组件的回放取枣器建筑 \.

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

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

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

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

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

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

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

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

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

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

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

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