npm install react-date-dpr
React Calendar DataPicker12
[![build status][travis-image]][travis-url]
[![NPM version][npm-image]][npm-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![npm download][download-image]][download-url]
[travis-image]: https://travis-ci.org/konna/react-date-dpr.svg?style=flat-square
[travis-url]: https://travis-ci.org/konna/react-date-dpr
[npm-image]: https://img.shields.io/npm/v/react-date-dpr.svg?style=flat-square
[npm-url]: http://npmjs.org/package/react-date-dpr
[coveralls-image]: https://coveralls.io/repos/github/konna/react-date-dpr/badge.svg?style=flat-square
[coveralls-url]: https://coveralls.io/github/konna/react-date-dpr?branch=master
[download-image]: https://img.shields.io/npm/dm/react-date-dpr.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-date-dpr
React Range DataPicker
npm install react-date-dpr
``
npm install
npm start
http://localhost:8002/examples/antd-range-calendar.html
| name | type | default | description |
|---|---|---|---|
| prefixCls | String | prefixCls of this component | |
| className | String | additional css class of root dom node | |
| style | Object | additional style of root dom node | |
| renderSidebar | () => React.Node | side bar | |
| renderFooter | () => React.Node | extra footer | |
| selectedValue | moment[] | current selected value range. with two elements. | |
| defaultSelectedValue | moment[] | default selected value range | |
| locale | Object | import from 'rc-calendar/lib/locale/en_US' | calendar locale |
| format | String | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input |
| disabledDate | Function(current:moment):Boolean | whether to disable select of current date | |
| showWeekNumber | Boolean | false | whether to show week number of year |
| showToday | Boolean | true | whether to show today button |
| showOk | Boolean | auto | whether has ok button in footer |
| showClear | Boolean | false | whether has clear button in header |
| timePicker | React Element | rc-timer-picker/lib/module/panel element | |
| onSelect | Function(date: moment[]) | called when a date range is selected from calendar | |
| onChange | Function(date: moment[]) | called when a date range is changed inside calendar (next year/next month/keyboard) | |
| dateInputPlaceholder | String[] | range date input's placeholders | |
| disabledTime | Function(current: moment[], type:'start'|'end'):Object | a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker | |
| type | enum('both','start', 'end') | both | whether fix start or end selected value. check start-end-range example |
| name | type | default | description |
|---|---|---|---|
| prefixCls | String | prefixCls of this component | |
| calendar | Calendar React Element | ||
| disabled | Boolean | whether picker is disabled | |
| placement | String|Object | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | |
| align | Object: alignConfig of dom-align | value will be merged into placement's align config. | |
| animation | String | index.css support 'slide-up' | |
| transitionName | String | css class for animation | |
| value | moment|moment[] | current value like input's value | |
| defaultValue | moment|moment[] | defaultValue like input's defaultValue | |
| onChange | Function | called when select a different value | |
| onOpenChange | (open:boolean) => void | called when open/close picker | |
| open | Boolean | current open state of picker. controlled prop | |
| getCalendarContainer | () => HTMLElement | () => {return document.body;} | dom node where calendar to be rendered into |
`
npm test
npm run chrome-test
`
npm run coverage
open coverage/ dir
react-date-dpr is released under the MIT license.