# xy-date-picker > 基于 React Hooks 的日期选择器组件 Latest version **0.2.0** (published 2019-12-23) · MIT license · 0 weekly downloads ## Install ```sh npm install xy-date-picker pnpm add xy-date-picker yarn add xy-date-picker bun add xy-date-picker ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.0 | | Published | 2019-12-23 | | First published | 2019-05-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 11 | | Unpacked size | 118.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | XueYou | | Maintainers | xueyou2000 | | Keywords | react, react-component, xy-date-picker | ## Links - npm: https://www.npmjs.com/package/xy-date-picker - Repository: https://github.com/xueyou2000/xy-date-picker - Homepage: https://github.com/xueyou2000/xy-date-picker#readme - Issues: https://github.com/xueyou2000/xy-date-picker/issues - npm.io page: https://npm.io/package/xy-date-picker ## Dependencies (11) - [react](https://npm.io/package/react.md) ^16.12.0 - [xy-input](https://npm.io/package/xy-input.md) ^0.1.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.12.0 - [utils-dom](https://npm.io/package/utils-dom.md) ^0.0.70 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [xy-trigger](https://npm.io/package/xy-trigger.md) ^0.1.0 - [utils-hooks](https://npm.io/package/utils-hooks.md) ^0.0.72 - [xy-time-picker](https://npm.io/package/xy-time-picker.md) ^0.1.0 - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.4 - [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.10.2 - [@fortawesome/free-regular-svg-icons](https://npm.io/package/@fortawesome/free-regular-svg-icons.md) ^5.10.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.2.0 (latest) — 2019-12-23 - 0.1.0 — 2019-11-19 - 0.0.34 — 2019-09-20 - 0.0.33 — 2019-09-09 - 0.0.32 — 2019-09-04 - 0.0.31 — 2019-05-30 - 0.0.3 — 2019-05-17 - 0.0.2 — 2019-05-16 ## README | ![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true) | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ | ![NPM version](http://img.shields.io/npm/v/xy-date-picker.svg?style=flat-square) ![node version](https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square) ![npm download](https://img.shields.io/npm/dm/xy-date-picker.svg?style=flat-square) [![xy-date-picker](https://nodei.co/npm/xy-date-picker.png)](https://npmjs.org/package/xy-date-picker) # xy-date-picker 日期选择器 ## 安装 ```bash # yarn yarn add xy-date-picker ``` ## 使用例子 ```ts import React from "react"; import ReactDOM from "react-dom"; import { DatePicker, DateRangePicker, YearMonthPicker } from "xy-date-picker"; ReactDOM.render(, container); ``` ## API ### DatePicker | 属性 | 说明 | 类型 | 默认值 | | --------------------- | -------------------------------- | ---------------------------------- | ----------------- | | value | 年月日时分秒字符串 | string | - | | defaultValue | 年月日时分秒字符串 | string | - | | onChange | onChange 事件 | (value: string) => void | - | | shortcuts | 快捷方式 | DatePickerShortcuts[] | - | | disabled | 是否禁用 | boolean | `false` | | showTime | 是否可以选择时间 | boolean | `false` | | which | 面板所处日期 | Date | 今天 | | onWhichChange | 面板所处日期更改 | (date: Date) => void | - | | min | 最小日期, 小于此时间不可选 | Date | - | | max | 最大日期, 大于此时间不可选 | Date | - | | selectionMode | 面板模式 | SelectionMode | SelectionMode.Day | | defaultSelectionMode | 默认面板模式 | SelectionMode | SelectionMode.Day | | onSelectionModeChange | 面板模式改变事件 | (mode: SelectionMode) => void | - | | onYearPicker | 年选择事件 | (date: Date) => void | - | | onMonthPicker | 月选择事件 | (date: Date) => void | - | | onDayPicker | 日选择事件 | (date: Date) => void | - | | onTimePicker | 时间选择事件 | (time: string, date: Date) => void | - | | silentTimePicker | 选择时间是否不触发 onChange 事件 | boolean | `false` | ### YearMonthPicker | 属性 | 说明 | 类型 | 默认值 | | ------------- | -------------------------- | ----------------------- | ------- | | value | 年月日时分秒字符串 | string | - | | defaultValue | 年月日时分秒字符串 | string | - | | onChange | onChange 事件 | (value: string) => void | - | | disabled | 是否禁用 | boolean | `false` | | showTime | 是否可以选择时间 | boolean | `false` | | which | 面板所处日期 | Date | 今天 | | onWhichChange | 面板所处日期更改 | (date: Date) => void | - | | min | 最小日期, 小于此时间不可选 | Date | - | | max | 最大日期, 大于此时间不可选 | Date | - | ### DateRangePicker | 属性 | 说明 | 类型 | 默认值 | | ------------- | -------------------------- | ---------------------------------- | ------- | | value | 年月日时分秒字符串 | string | - | | defaultValue | 年月日时分秒字符串 | string | - | | onChange | onChange 事件 | (value: string) => void | - | | disabled | 是否禁用 | boolean | `false` | | showTime | 是否可以选择时间 | boolean | `false` | | which | 面板所处日期 | Date | 今天 | | onWhichChange | 面板所处日期更改 | (date: Date) => void | - | | min | 最小日期, 小于此时间不可选 | Date | - | | max | 最大日期, 大于此时间不可选 | Date | - | | onYearPicker | 年选择事件 | (date: Date) => void | - | | onMonthPicker | 月选择事件 | (date: Date) => void | - | | onDayPicker | 日选择事件 | (date: Date) => void | - | | onTimePicker | 时间选择事件 | (time: string, date: Date) => void | - | ## 开发 ```sh yarn run start ``` ## 例子 http://localhost:6006 ## 测试 ``` yarn run test ``` ## 开源许可 xy-date-picker is released under the MIT license. --- _Source: https://npm.io/package/xy-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._