rc-picker

πŸ“… All Date Pickers you need.

Showing:

Popularity

Downloads/wk

493K

GitHub Stars

107

Maintenance

Last Commit

15d ago

Contributors

48

Package

Dependencies

8

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

rc-picker

NPM version build status Codecov Dependencies DevDependencies npm download bundle size

Live Demo

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

Install

rc-picker

Usage

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

render(<Picker />, mountNode);

API

Picker

PropertyTypeDefaultDescription
prefixClsStringrc-pickerprefixCls of this component
classNameString''additional css class of root dom node
styleReact.CSSPropertiesadditional style of root dom node
dropdownClassNameString''additional className applied to dropdown
dropdownAlignObject:alignConfig of dom-alignvalue will be merged into placement's dropdownAlign config
popupStyleReact.CSSPropertiescustomize popup style
transitionNameString''css class for animation
localeObjectimport from 'rc-picker/lib/locale/en_US'rc-picker locale
inputReadOnlyBooleanfalseset input to read only
allowClearBooleanfalsewhether show clear button
autoFocusBooleanfalsewhether auto focus
showTimeBoolean | ObjectshowTime optionsto provide an additional time selection
pickertime | date | week | month | yearcontrol which kind of panel should be shown
formatString | String[]depends on whether you set timePicker and your localeuse 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
use12HoursBooleanfalse12 hours display mode
valuemomentcurrent value like input's value
defaultValuemomentdefaultValue like input's defaultValue
openBooleanfalsecurrent open state of picker. controlled prop
suffixIconReactNodeThe custom suffix icon
clearIconReactNodeThe custom clear icon
prevIconReactNodeThe custom prev icon
nextIconReactNodeThe custom next icon
superPrevIconReactNodeThe custom super prev icon
superNextIconReactNodeThe custom super next icon
disabledBooleanfalsewhether the picker is disabled
placeholderStringpicker input's placeholder
getPopupContainerfunction(trigger)to set the container of the floating layer, while the default is to create a div element in body
onChangeFunction(date: moment, dateString: string)a callback function, can be executed when the selected time is changing
onOpenChangeFunction(open:boolean)called when open/close picker
onFocus(event:React.FocusEvent) => voidcalled like input's on focus
onBlur(event:React.FocusEvent) => voidcalled like input's on blur
onKeyDown(event:React.KeyboardEvent, preventDefault: () => void) => voidinput on keydown event
directionString: ltr or rtlLayout direction of picker component, it supports RTL direction too.

PickerPanel

PropertyTypeDefaultDescription
prefixClsStringrc-pickerprefixCls of this component
classNameString''additional css class of root dom
styleReact.CSSPropertiesadditional style of root dom node
localeObjectimport from 'rc-picker/lib/locale/en_US'rc-picker locale
valuemomentcurrent value like input's value
defaultValuemomentdefaultValue like input's defaultValue
defaultPickerValuemomentSet default display picker view date
modetime | datetime | date | week | month | year | decadecontrol which kind of panel
pickertime | date | week | month | yearcontrol which kind of panel
tabIndexNumber0view tabIndex
showTimeBoolean | ObjectshowTime optionsto provide an additional time selection
showTodayBooleanfalsewhether to show today button
disabledDateFunction(date:moment) => Booleanwhether to disable select of current date
dateRenderFunction(currentDate:moment, today:moment) => React.Nodecustom rendering function for date cells
monthCellRenderFunction(currentDate:moment, locale:Locale) => React.NodeCustom month cell render method
renderExtraFooter(mode) => React.Nodeextra footer
onSelectFunction(date: moment)a callback function, can be executed when the selected time
onPanelChangeFunction(value: moment, mode)callback when picker panel mode is changed
onMouseDown(event:React.MouseEvent) => voidcallback when executed onMouseDown evnent
directionString: ltr or rtlLayout direction of picker component, it supports RTL direction too.

RangePicker

PropertyTypeDefaultDescription
prefixClsStringrc-pickerprefixCls of this component
classNameString''additional css class of root dom
styleReact.CSSPropertiesadditional style of root dom node
localeObjectimport from 'rc-picker/lib/locale/en_US'rc-picker locale
valuemomentcurrent value like input's value
defaultValuemomentdefaultValue like input's defaultValue
defaultPickerValuemomentSet default display picker view date
separatorString'~'set separator between inputs
pickertime | date | week | month | yearcontrol which kind of panel
placeholder[String, String]placeholder of date input
showTimeBoolean | ObjectshowTime optionsto provide an additional time selection
showTime.defaultValue[moment, moment]to set default time of selected date
use12HoursBooleanfalse12 hours display mode
disabledTimeFunction(date: moment, type:'start'|'end'):Object
ranges{ String | [range: string]: moment[] } | { [range: string]: () => moment[] }preseted ranges for quick selection
formatString | String[]depends on whether you set timePicker and your localeuse 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
disabledBooleanfalsewhether the range picker is disabled
onChangeFunction(value:[moment], formatString: [string, string])a callback function, can be executed when the selected time is changing
onCalendarChangeFunction(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
directionString: ltr or rtlLayout direction of picker component, it supports RTL direction too.
orderBooleantrue(TimeRangePicker only) false to disable auto order

showTime-options

PropertyTypeDefaultDescription
formatStringmoment format
showHourBooleantruewhether show hour
showMinuteBooleantruewhether show minute
showSecondBooleantruewhether show second
use12HoursBooleanfalse12 hours display mode
hourStepNumber1interval between hours in picker
minuteStepNumber1interval between minutes in picker
secondStepNumber1interval between seconds in picker
hideDisabledOptionsBooleanfalsewhether hide disabled options
defaultValuemomentnulldefault initial value

Development

npm install
npm start

License

rc-picker is released under the MIT license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial