Installations

npm install rc-picker

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=8.x

Node Version

22.5.1

NPM Version

10.8.2 Score

91

Supply Chain

84.9

Quality

89.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

50

Total

800

Closed

356

Merged

394

Issues

Open

80

Total

131

Closed

51

Releases

337

@rc-component/picker@1.3.0

Updated on Apr 18, 2025

@rc-component/picker@1.2.4

Updated on Apr 16, 2025

@rc-component/picker@1.2.3

Updated on Mar 26, 2025

@rc-component/picker@1.2.2

Updated on Mar 21, 2025

@rc-component/picker@1.2.1

Updated on Mar 20, 2025

@rc-component/picker@1.2.0

Updated on Mar 19, 2025

View All 337 releases

Languages

3

TypeScript

Less

JavaScript

TypeScript (98.09%)

Less (1.79%)

JavaScript (0.11%)

Developer

react-component

Download Statistics

Total Downloads

216,652,133

Last Day

73,620

Last Week

1,651,873

Last Month

7,105,485

Last Year

73,793,173

GitHub Statistics

MIT License

301 Stars

976 Commits

325 Forks

6 Watchers

15 Branches

125 Contributors

Updated on Jun 12, 2025

Bundle Size

125.81 kB

Minified

41.86 kB

Minified + Gzipped

Bundlephobia

Maintainers

6

View All 125 Contributors

Package Meta Information

Latest Version

4.11.3

Package Id

rc-picker@4.11.3

Unpacked Size

878.33 kB

Size

129.25 kB

File Count

569

NPM Version

10.8.2

Node Version

22.5.1

Published on

Feb 27, 2025

Total Downloads

Cumulative downloads

Total Downloads

216,652,133

Dependencies

6

@babel/runtime @rc-component/trigger classnames rc-overflow rc-resize-observer rc-util

Peer Dependencies

6

date-fns dayjs luxon moment react react-dom

Dev Dependencies

32

rc-picker

Live Demo

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

Install

Usage

1import Picker from 'rc-picker';
2import 'rc-picker/assets/index.css';
3import { render } from 'react-dom';
4
5render(<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
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.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

8

SAST

Determines if the project uses static code analysis.

6

Maintained

Determines if the project is "actively maintained".

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

Score

4.8

/10

Last Scanned on 2025-06-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to rc-picker

Other packages similar to rc-picker

rc-picker

Installations

Developer Guide

Yes

CommonJS

>=8.x

22.5.1

10.8.2

Score

Pull Requests

50

800

356

394

Issues

80

131

51

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

125.81 kB

41.86 kB

Maintainers

Package Meta Information

Total Downloads

216,652,133

Dependencies

Peer Dependencies

Dev Dependencies

rc-picker

Live Demo

Install

Usage

API

Picker

PickerPanel

RangePicker

showTime-options

Development

License

10

10

10

10

8

6

3

0

0

0

0

0

0

4.8

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads