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

| Property | Type | Default | Description | | --- | --- | --- | --- | | prefixCls | String | rc-picker | prefixCls of this component | | className | String | '' | additional css class of root dom node | | style | React.CSSProperties | | additional style of root dom node | | dropdownClassName | String | '' | additional className applied to dropdown | | popupAlign | Object:alignConfig of dom-align | | value will be merged into placement's popupAlign config | | popupStyle | React.CSSProperties | | customize popup style | | transitionName | String | '' | css class for animation | | locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale | | inputReadOnly | boolean | false | set input to read only | | allowClear | boolean | { clearIcon?: ReactNode } | false | whether show clear button or customize clear button | | autoFocus | boolean | false | whether auto focus | | showTime | boolean | Object | showTime options | to provide an additional time selection | | picker | time | date | week | month | year | | control which kind of panel should be shown | | 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 | | use12Hours | boolean | false | 12 hours display mode | | value | moment | | current value like input's value | | defaultValue | moment | | defaultValue like input's defaultValue | | open | boolean | false | current open state of picker. controlled prop | | suffixIcon | ReactNode | | The custom suffix icon | | prevIcon | ReactNode | | The custom prev icon | | nextIcon | ReactNode | | The custom next icon | | superPrevIcon | ReactNode | | The custom super prev icon | | superNextIcon | ReactNode | | The custom super next icon | | disabled | boolean | false | whether the picker is disabled | | placeholder | String | | picker input's placeholder | | getPopupContainer | function(trigger) | | to set the container of the floating layer, while the default is to create a div element in body | | onChange | Function(date: moment, dateString: string) | | a callback function, can be executed when the selected time is changing | | onOpenChange | Function(open:boolean) | | called when open/close picker | | onFocus | (event:React.FocusEvent<HTMLInputElement>) => void | | called like input's on focus | | onBlur | (event:React.FocusEvent<HTMLInputElement>) => void | | called like input's on blur | | onKeyDown | (event:React.KeyboardEvent<HTMLInputElement>, preventDefault: () => void) => void | | input on keydown event | | direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. |

PickerPanel

| 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 | | mode | time | datetime | date | week | month | year | decade | | control which kind of panel | | picker | time | date | week | month | year | | control which kind of panel | | tabIndex | Number | 0 | view tabIndex | | showTime | boolean | Object | showTime options | to provide an additional time selection | | showToday | boolean | false | whether to show today button | | disabledDate | Function(date:moment) => boolean | | whether to disable select of current date | | dateRender | Function(currentDate:moment, today:moment) => React.Node | | custom rendering function for date cells | | monthCellRender | Function(currentDate:moment, locale:Locale) => React.Node | | Custom month cell render method | | renderExtraFooter | (mode) => React.Node | | extra footer | | onSelect | Function(date: moment) | | a callback function, can be executed when the selected time | | onPanelChange | Function(value: moment, mode) | | callback when picker panel mode is changed | | onMouseDown | (event:React.MouseEvent<HTMLInputElement>) => void | | callback when executed onMouseDown event | | direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. |

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 | | 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

| Property | Type | Default | Description | | ------------------- | ------- | ------- | ---------------------------------- | | format | String | | moment format | | showHour | boolean | true | whether show hour | | showMinute | boolean | true | whether show minute | | showSecond | boolean | true | whether show second | | use12Hours | boolean | false | 12 hours display mode | | hourStep | Number | 1 | interval between hours in picker | | minuteStep | Number | 1 | interval between minutes in picker | | secondStep | Number | 1 | interval between seconds in picker | | hideDisabledOptions | boolean | false | whether hide disabled options | | defaultValue | moment | null | default initial value |

Development

npm install
npm start

License

rc-picker is released under the MIT license.