| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

xy-date-picker

日期选择器

安装

# yarn
yarn add xy-date-picker

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, DateRangePicker, YearMonthPicker } from "xy-date-picker";
ReactDOM.render(<DatePicker />, 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 | - |

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-date-picker is released under the MIT license.