rc-picker
React date & time picker
Last updated 4 months ago
by zombiej
.
MIT
·
Repository
·
Bugs
·
Original npm
·
Tarball
·
package.json
$ npm install rc-picker
SYNC missed versions from
official npm registry.
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 |
| dropdownAlign | Object:alignConfig of dom-align | value will be merged into placement's dropdownAlign 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.
Current Tags
- 4.6.15 ... latest (2 months ago)
310 Versions
- 4.6.15 ... 2 months ago
- 4.6.14 ... 3 months ago
- 4.6.13 ... 3 months ago
- 4.6.12 ... 3 months ago
- 4.6.11 ... 3 months ago
- 4.6.10 ... 4 months ago
- 4.6.9 ... 4 months ago
- 4.6.8 ... 4 months ago
- 4.6.7 ... 4 months ago
- 4.6.6 ... 5 months ago
- 4.6.5 ... 5 months ago
- 4.6.4 ... 5 months ago
- 4.6.4-1 ... 5 months ago
- 4.6.4-0 ... 5 months ago
- 4.6.3 ... 5 months ago
- 4.6.2 ... 5 months ago
- 4.6.1 ... 5 months ago
- 4.6.0 ... 5 months ago
- 4.5.0 ... 7 months ago
- 4.4.2 ... 7 months ago
- 4.4.1 ... 7 months ago
- 4.4.0 ... 7 months ago
- 4.3.2 ... 7 months ago
- 4.3.1 ... 7 months ago
- 3.14.7 ... 8 months ago
- 4.3.0 ... 8 months ago
- 4.2.1 ... 8 months ago
- 4.2.0 ... 8 months ago
- 4.1.5 ... 9 months ago
- 4.1.4 ... 9 months ago
- 4.1.3 ... 9 months ago
- 4.1.2 ... 9 months ago
- 4.1.1 ... 9 months ago
- 4.1.0 ... 9 months ago
- 4.0.0-alpha.44 ... 9 months ago
- 4.0.0-alpha.43 ... 9 months ago
- 4.0.0-alpha.42 ... 9 months ago
- 4.0.0-alpha.40 ... 10 months ago
- 4.0.0-alpha.39 ... 10 months ago
- 4.0.0-alpha.37 ... 10 months ago
- 4.0.0-alpha.36 ... 10 months ago
- 4.0.0-alpha.35 ... 10 months ago
- 4.0.0-alpha.34 ... 10 months ago
- 4.0.0-alpha.33 ... 10 months ago
- 4.0.0-alpha.32 ... 10 months ago
- 4.0.0-alpha.30 ... 10 months ago
- 4.0.0-alpha.28 ... 10 months ago
- 4.0.0-alpha.23 ... 10 months ago
- 4.0.0-alpha.21 ... 10 months ago
- 4.0.0-alpha.20 ... 10 months ago
- 4.0.0-alpha.19 ... 10 months ago
- 4.0.0-alpha.18 ... 10 months ago
- 4.0.0-alpha.17 ... 10 months ago
- 4.0.0-alpha.16 ... 10 months ago
- 4.0.0-alpha.15 ... 10 months ago
- 4.0.0-alpha.14 ... 10 months ago
- 4.0.0-alpha.13 ... 10 months ago
- 4.0.0-alpha.12 ... 10 months ago
- 4.0.0-alpha.11 ... 10 months ago
- 4.0.0-alpha.10 ... 10 months ago
- 4.0.0-alpha.9 ... a year ago
- 4.0.0-alpha.7 ... a year ago
- 4.0.0-alpha.6 ... a year ago
- 4.0.0-alpha.5 ... a year ago
- 4.0.0-alpha.4 ... a year ago
- 4.0.0-alpha.3 ... a year ago
- 4.0.0-alpha.2 ... a year ago
- 4.0.0-alpha.1 ... a year ago
- 4.0.0-alpha.0 ... a year ago
- 3.14.6 ... a year ago
- 3.14.5 ... a year ago
- 3.14.4 ... a year ago
- 3.14.3 ... a year ago
- 3.14.2 ... a year ago
- 3.14.1 ... a year ago
- 3.14.0 ... a year ago
- 2.7.6 ... a year ago
- 2.7.5 ... a year ago
- 3.13.2 ... a year ago
- 2.7.4 ... a year ago
- 3.13.1 ... a year ago
- 2.7.3 ... a year ago
- 3.13.0 ... a year ago
- 3.12.0 ... a year ago
- 3.11.2 ... a year ago
- 3.11.1 ... a year ago
- 3.11.0 ... a year ago
- 3.10.0 ... a year ago
- 3.9.0 ... a year ago
- 3.8.2 ... a year ago
- 3.8.1 ... a year ago
- 3.8.0 ... a year ago
- 3.7.6 ... a year ago
- 3.7.5 ... a year ago
- 3.7.4 ... 2 years ago
- 3.7.3 ... 2 years ago
- 3.7.2 ... 2 years ago
- 3.7.1 ... 2 years ago
- 3.7.0 ... 2 years ago
- 2.7.2 ... 2 years ago
- 2.7.1 ... 2 years ago
- 3.6.2 ... 2 years ago
- 3.6.1 ... 2 years ago
- 3.5.2 ... 2 years ago
- 3.6.0 ... 2 years ago
- 3.6.0-alpha.0 ... 2 years ago
- 3.5.1 ... 2 years ago
- 3.5.0 ... 2 years ago
- 3.4.0 ... 2 years ago
- 3.3.4 ... 2 years ago
- 3.3.3 ... 2 years ago
- 3.3.2 ... 2 years ago
- 3.3.1 ... 2 years ago
- 3.3.0 ... 2 years ago
- 3.2.4 ... 2 years ago
- 3.2.3 ... 2 years ago
- 3.2.2 ... 2 years ago
- 3.2.1 ... 2 years ago
- 3.2.0 ... 2 years ago
- 3.1.5 ... 2 years ago
- 3.1.4 ... 2 years ago
- 3.1.3 ... 2 years ago
- 3.1.2 ... 2 years ago
- 3.1.1 ... 2 years ago
- 3.1.0 ... 2 years ago
- 2.7.0 ... 2 years ago
- 3.0.0-4 ... 2 years ago
- 3.0.0-2 ... 2 years ago
- 3.0.0-1 ... 2 years ago
- 2.6.11 ... 2 years ago
- 2.6.10 ... 2 years ago
- 2.6.9 ... 3 years ago
- 2.6.8 ... 3 years ago
- 2.6.7 ... 3 years ago
- 2.6.6 ... 3 years ago
- 2.6.5 ... 3 years ago
- 2.6.4 ... 3 years ago
- 2.6.3 ... 3 years ago
- 2.6.2 ... 3 years ago
- 2.6.1 ... 3 years ago
- 2.6.0 ... 3 years ago
- 2.5.19 ... 3 years ago
- 2.5.18 ... 3 years ago
- 2.5.17 ... 3 years ago
- 2.5.15 ... 3 years ago
- 2.5.14 ... 3 years ago
- 2.5.13 ... 3 years ago
- 2.5.12 ... 3 years ago
- 2.5.10 ... 4 years ago
- 2.5.7 ... 4 years ago
- 2.5.6 ... 4 years ago
- 2.5.5 ... 4 years ago
- 2.5.4 ... 4 years ago
- 2.5.2 ... 4 years ago
- 2.5.1 ... 4 years ago
- 2.5.0 ... 4 years ago
- 2.4.3 ... 4 years ago
- 2.4.2 ... 4 years ago
- 2.4.1 ... 4 years ago
- 2.4.0 ... 4 years ago
- 2.3.4 ... 4 years ago
- 2.3.3 ... 4 years ago
- 2.3.2 ... 4 years ago
- 2.3.1 ... 4 years ago
- 2.3.0 ... 4 years ago
- 2.2.1 ... 4 years ago
- 2.2.0 ... 4 years ago
- 2.1.0 ... 4 years ago
- 2.0.11 ... 4 years ago
- 2.0.10 ... 4 years ago
- 2.0.9 ... 4 years ago
- 2.0.8 ... 4 years ago
- 2.0.7 ... 4 years ago
- 2.0.6 ... 4 years ago
- 1.15.4 ... 4 years ago
- 2.0.5 ... 4 years ago
- 1.15.3 ... 4 years ago
- 1.15.2 ... 4 years ago
- 2.0.4 ... 4 years ago
- 2.0.3 ... 4 years ago
- 2.0.2 ... 4 years ago
- 2.0.1 ... 4 years ago
- 2.0.0 ... 4 years ago
- 1.15.1 ... 4 years ago
- 1.15.0 ... 4 years ago
- 1.14.0 ... 4 years ago
- 1.13.1 ... 4 years ago
- 1.13.0 ... 4 years ago
- 1.10.7 ... 4 years ago
- 1.12.1 ... 4 years ago
- 1.12.0 ... 4 years ago
- 1.11.0 ... 4 years ago
- 1.10.6 ... 4 years ago
- 1.10.5 ... 4 years ago
- 1.10.4 ... 4 years ago
- 1.10.3 ... 4 years ago
- 1.10.2 ... 4 years ago
- 1.10.1 ... 4 years ago
- 1.10.0 ... 4 years ago
- 1.9.0 ... 4 years ago
- 1.8.0 ... 4 years ago
- 1.7.1 ... 4 years ago
- 1.7.0 ... 4 years ago
- 1.6.4 ... 4 years ago
- 1.6.3 ... 4 years ago
- 1.6.2 ... 4 years ago
- 1.6.1 ... 4 years ago
- 1.6.0 ... 4 years ago
- 1.5.1 ... 4 years ago
- 1.5.0 ... 4 years ago
- 1.4.16 ... 5 years ago
- 1.4.15 ... 5 years ago
- 1.4.14 ... 5 years ago
- 1.4.12 ... 5 years ago
- 1.4.11 ... 5 years ago
- 1.4.10 ... 5 years ago
- 1.4.9 ... 5 years ago
- 1.4.8 ... 5 years ago
- 1.4.7 ... 5 years ago
- 1.4.6 ... 5 years ago
- 1.4.5 ... 5 years ago
- 1.4.4 ... 5 years ago
- 1.4.3 ... 5 years ago
- 1.4.2 ... 5 years ago
- 1.4.1 ... 5 years ago
- 1.4.0 ... 5 years ago
- 1.3.0 ... 5 years ago
- 1.2.2 ... 5 years ago
- 1.1.5 ... 5 years ago
- 1.2.1 ... 5 years ago
- 1.2.0 ... 5 years ago
- 1.1.4 ... 5 years ago
- 1.1.3 ... 5 years ago
- 1.1.2 ... 5 years ago
- 1.1.1 ... 5 years ago
- 1.1.0 ... 5 years ago
- 1.0.0 ... 5 years ago
- 0.0.1-rc.7 ... 5 years ago
- 0.0.1-rc.6 ... 5 years ago
- 0.0.1-rc.5 ... 5 years ago
- 0.0.1-rc.4 ... 5 years ago
- 0.0.1-rc.3 ... 5 years ago
- 0.0.1-rc.2 ... 5 years ago
- 0.0.1-rc.1 ... 5 years ago
- 0.0.1-rc.0 ... 5 years ago
- 0.0.1-alpha.64 ... 5 years ago
- 0.0.1-alpha.63 ... 5 years ago
- 0.0.1-alpha.62 ... 5 years ago
- 0.0.1-alpha.60 ... 5 years ago
- 0.0.1-alpha.59 ... 5 years ago
- 0.0.1-alpha.58 ... 5 years ago
- 0.0.1-alpha.57 ... 5 years ago
- 0.0.1-alpha.56 ... 5 years ago
- 0.0.1-alpha.55 ... 5 years ago
- 0.0.1-alpha.54 ... 5 years ago
- 0.0.1-alpha.53 ... 5 years ago
- 0.0.1-alpha.52 ... 5 years ago
- 0.0.1-alpha.51 ... 5 years ago
- 0.0.1-alpha.50 ... 5 years ago
- 0.0.1-alpha.49 ... 5 years ago
- 0.0.1-alpha.48 ... 5 years ago
- 0.0.1-alpha.47 ... 5 years ago
- 0.0.1-alpha.46 ... 5 years ago
- 0.0.1-alpha.45 ... 5 years ago
- 0.0.1-alpha.44 ... 5 years ago
- 0.0.1-alpha.43 ... 5 years ago
- 0.0.1-alpha.42 ... 5 years ago
- 0.0.1-alpha.41 ... 5 years ago
- 0.0.1-alpha.40 ... 5 years ago
- 0.0.1-alpha.39 ... 5 years ago
- 0.0.1-alpha.38 ... 5 years ago
- 0.0.1-alpha.37 ... 5 years ago
- 0.0.1-alpha.36 ... 5 years ago
- 0.0.1-alpha.35 ... 5 years ago
- 0.0.1-alpha.34 ... 5 years ago
- 0.0.1-alpha.33 ... 5 years ago
- 0.0.1-alpha.32 ... 5 years ago
- 0.0.1-alpha.31 ... 5 years ago
- 0.0.1-alpha.30 ... 5 years ago
- 0.0.1-alpha.29 ... 5 years ago
- 0.0.1-alpha.28 ... 5 years ago
- 0.0.1-alpha.27 ... 5 years ago
- 0.0.1-alpha.26 ... 5 years ago
- 0.0.1-alpha.25 ... 5 years ago
- 0.0.1-alpha.24 ... 5 years ago
- 0.0.1-alpha.23 ... 5 years ago
- 0.0.1-alpha.22 ... 5 years ago
- 0.0.1-alpha.21 ... 5 years ago
- 0.0.1-alpha.20 ... 5 years ago
- 0.0.1-alpha.19 ... 5 years ago
- 0.0.1-alpha.18 ... 5 years ago
- 0.0.1-alpha.17 ... 5 years ago
- 0.0.1-alpha.16 ... 5 years ago
- 0.0.1-alpha.15 ... 5 years ago
- 0.0.1-alpha.14 ... 5 years ago
- 0.0.1-alpha.13 ... 5 years ago
- 0.0.1-alpha.12 ... 5 years ago
- 0.0.1-alpha.11 ... 5 years ago
- 0.0.1-alpha.10 ... 5 years ago
- 0.0.1-alpha.9 ... 5 years ago
- 0.0.1-alpha.8 ... 5 years ago
- 0.0.1-alpha.7 ... 5 years ago
- 0.0.1-alpha.6 ... 5 years ago
- 0.0.1-alpha.5 ... 5 years ago
- 0.0.1-alpha.4 ... 5 years ago
- 0.0.1-alpha.3 ... 5 years ago
- 0.0.1-alpha.2 ... 5 years ago
- 0.0.1-alpha.1 ... 5 years ago
- 0.0.1-alpha.0 ... 5 years ago
- 0.0.0 ... 5 years ago
Maintainers (6)
afc163
zombiej
07akioni
lixuan
xrkffgg
madccc
Downloads
Total
39
Today
0
This Week
0
This Month
0
Last Day
0
Last Week
0
Last Month
4
Dependencies (6)
- @babel/runtime ^7.24.7
- @rc-component/trigger ^2.0.0
- classnames ^2.2.1
- rc-overflow ^1.3.2
- rc-resize-observer ^1.4.0
- rc-util ^5.43.0
Dev Dependencies (31)
- @rc-component/father-plugin ^1.0.0
- @testing-library/react ^16.0.0
- @types/classnames ^2.2.9
- @types/jest ^29.4.0
- @types/luxon ^3.2.0
- @types/react ^18.0.28
- @types/react-dom ^18.0.8
- coveralls ^3.0.6
- cross-env ^7.0.2
- date-fns 2.x
- dayjs 1.x
- dumi ^2.1.15
- eslint ^8.56.0
- eslint-plugin-eslint-comments ^3.2.0
- eslint-plugin-jest ^27.6.0
- eslint-plugin-react-hooks ^4.6.0
- eslint-plugin-unicorn ^55.0.0
- father ^4.0.0
- glob ^10.4.1
- husky ^9.0.11
- less ^4.2.0
- lint-staged ^15.2.7
- luxon 3.x
- mockdate ^3.0.2
- moment ^2.24.0
- np ^10.0.2
- prettier ^3.1.0
- rc-test ^7.0.9
- react ^18.2.0
- react-dom ^18.2.0
- typescript ^5.3.0
Dependents (2)