# @uiw/react-date-picker

> DatePicker component

Latest version **4.22.3** (published 2023-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uiw/react-date-picker
pnpm add @uiw/react-date-picker
yarn add @uiw/react-date-picker
bun add @uiw/react-date-picker
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.22.3 |
| Published | 2023-11-29 |
| First published | 2020-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 93.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 740 |
| Author | Kenny Wong |
| Maintainers | uiwjs, wcjiang |
| Keywords | date-picker, react-date-picker, design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend |

## Links

- npm: https://www.npmjs.com/package/@uiw/react-date-picker
- Repository: https://github.com/uiwjs/uiw
- Homepage: https://uiwjs.github.io/#/components/date-picker
- Issues: https://github.com/uiwjs/uiw/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/@uiw/react-date-picker

## Dependencies (4)

- [@uiw/utils](https://npm.io/package/@uiw/utils.md) ^4.22.3
- [@uiw/formatter](https://npm.io/package/@uiw/formatter.md) ~2.0.0
- [@uiw/react-icon](https://npm.io/package/@uiw/react-icon.md) ^4.22.3
- [@uiw/react-time-picker](https://npm.io/package/@uiw/react-time-picker.md) ^4.22.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 4.22.3 (latest) — 2023-11-29
- 5.0.0-bate.2.1 (bate) — 2023-03-10
- 4.22.2 — 2023-11-09
- 4.22.1 — 2023-11-08
- 4.22.0 — 2023-09-19
- 4.21.28 — 2023-05-05
- 4.21.27 — 2023-04-21
- 4.21.26 — 2023-04-20
- 4.21.25 — 2023-03-14
- 4.21.24 — 2023-03-08
- 5.0.0-bate.2.0 — 2023-03-02
- 4.21.23 — 2022-12-21
- 4.21.22 — 2022-12-19
- 4.21.21 — 2022-12-19
- 5.0.0-bate-19 — 2022-12-12
- … 157 more at https://npm.io/package/@uiw/react-date-picker/versions

## README

DatePicker 日期选择器
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-picker/file/README.md)
[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-date-picker.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-date-picker)
[![npm version](https://img.shields.io/npm/v/@uiw/react-date-picker.svg?label=@uiw/react-date-picker)](https://npmjs.com/@uiw/react-date-picker)

显示一个月的日历，并允许用户选择单个日期，常见的应用场景在表单中应用，请查看基于 `DatePicker` 的 [`DateInput`](#/components/date-input) 组件。

```jsx
import { DatePicker } from 'uiw';
// or
import DatePicker from '@uiw/react-date-picker';
```

### 基础用法

```jsx mdx:preview&bg=#fff
import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(new Date('2019-02-26 02:00:00'));
  
  return (
    <div>
      <DatePicker
        date={date}
        weekday={['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']}
        monthLabel={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
        todayButton="今天"
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <DatePicker
        showTime
        date={date}
        todayButton="今天"
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <DatePicker
        date={date}
        todayButton="今天"
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  );
}
```

### 显示时间

```jsx mdx:preview&bg=#fff
import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
        showTime
        date={date}
        todayButton="今天"
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  )
}
```

### 设置本地语言

```jsx mdx:preview&bg=#fff
import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
        todayButton="Today"
        weekTitle={['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']}
        weekday={['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']}
        monthLabel={['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']}
        date={date}
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  )
}
```

### 初始展示日期

```jsx mdx:preview&bg=#fff
import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
        date={date}
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  )
}
```

### 禁用时间

通过 `disabledDate` 方法设置，今天和今天之前不能选择。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { DatePicker } from 'uiw';

function disabledDate(currentDate) {
  // 今天和今天之前不能选择
  return currentDate && currentDate.valueOf() < Date.now();
}

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
          disabledDate={disabledDate}
        date={date}
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  );
}
```

## 定制日历单元格

使用 `renderDay` 可以自定义日期单元格的内容和样式。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { DatePicker } from 'uiw';

export default function Demo() {
  const [date, setDate] = React.useState(null);
  return (
    <div>
      <DatePicker
        renderDay={(day, props) => {
          const style = {}
          const week = props.date.getDay();
          if (week === 0 && !props.prev && !props.next) {
            style.boxShadow = 'inset 0 0 0 1px rgb(255 0 0)';
          }
          return (
            <div style={style}> {day} </div>
          );
        }}
        date={date}
        onChange={(selectedDate) => setDate(selectedDate)}
      />
      <div>{date ? String(date) : 'no date'}</div>
    </div>
  );
}
```

## DatePicker

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| date | 选中的日期 | Date | - |
| panelDate | 日历面板默认展示哪一页 | Date | `new Date` |
| today | 默认高亮当天日期 | Date | `new Date` |
| todayButton | 展示回到今天按钮，和提示文本。 | String | - |
| showTime | 增加时间选择功能，当 showTime 为一个对象时，其属性会传递给内建的 [`<TimePicker />`](#/components/time-picker)。 | Boolean/Object | - |
| renderDay | 增加时间选择功能。 `end`: 周末，`prev`: 上个月，`next`：下个月 `@3.0.0+` | Function(day, { end: bool, prev: bool, next: bool, date: Date }) | - |
| disabledDate | 不可选择的日期，函数返回 `true` 当前日期被禁用无法选择。`end`: 周末，`prev`: 上个月，`next`：下个月 | Function(currentDate, { end: bool, prev: bool, next: bool }) | - |
| weekTitle | 星期显示文本提示 | Array | \[`星期天`, `星期一`, `星期二`, `星期三`, `星期四`, `星期五`, `星期六`\] |
| weekday | 星期显示文本 | Array | \[`日`, `一`, `二`, `三`, `四`, `五`, `六`\] |
| monthLabel | 月份显示文本 | Array | \[`一月`, `二月`, `三月`, `四月`, `五月`, `六月`, `七月`, `八月`, `九月`, `十月`, `十一月`, `十二月`\] |
| onChange | 选择一天时调用。 | (selectedDate?: Date, dateSource?: IDateSource) | - |
| onPanelChange | 面板变化事件。 | (date?: Date, mode?: 'next' | 'prev') | - |

## DatePicker.showTime

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| defaultValue | 默认时间 | Date | - |
| disabled | 禁用全部操作 | Boolean | `false` |
| disabledHours | 禁止选择部分小时选项 | Function | - |
| disabledMinutes | 禁止选择部分分钟选项 | Function | - |
| disabledSeconds | 禁止选择部分秒选项 | Function | - |
| format | 禁止选择部分秒选项 | Function | `HH:mm:ss` |
| hourStep | 禁止选择部分秒选项 | Function | - |

---
_Source: https://npm.io/package/@uiw/react-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._