rc-picker

Live Demo

https://react-component.github.io/picker/

Install

Usage

import Picker from 'rc-picker';
import 'rc-picker/assets/index.css';
import { render } from 'react-dom';

render(<Picker />, mountNode);

API

Picker

PickerPanel

RangePicker

| Property | Type | Default | Description | | --- | --- | --- | --- | --- | | prefixCls | String | rc-picker | prefixCls of this component | | className | String | '' | additional css class of root dom | | style | React.CSSProperties | | additional style of root dom node | | locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale | | value | moment | | current value like input's value | | defaultValue | moment | | defaultValue like input's defaultValue | | defaultPickerValue | moment | | Set default display picker view date | | separator | String | '~' | set separator between inputs | | picker | time | date | week | month | year | | control which kind of panel | | previewValue | false | hover | hover | When the user selects the date hover option, the value of the input field undergoes a temporary change | | placeholder | [String, String] | | placeholder of date input | | showTime | boolean | Object | showTime options | to provide an additional time selection | | showTime.defaultValue | [moment, moment] | | to set default time of selected date | | use12Hours | boolean | false | 12 hours display mode | | disabledTime | Function(date: moment, type:'start'|'end'):Object | | | to specify the time that cannot be selected | | ranges | { String | [range: string]: moment[] } | { [range: string]: () => moment[] } | | preseted ranges for quick selection | | format | String | String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display | | allowEmpty | [boolean, boolean] | | allow range picker clearing text | | selectable | [boolean, boolean] | | whether to selected picker | | disabled | boolean | false | whether the range picker is disabled | | onChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the selected time is changing | | onCalendarChange | Function(value:[moment], formatString: [string, string], info: { range:'start'|'end' }) | | a callback function, can be executed when the start time or the end time of the range is changing | | direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. | | order | boolean | true | (TimeRangePicker only) false to disable auto order |

showTime-options

Development

npm install
npm start

License

rc-picker is released under the MIT license.