JSPM

rc-picker

4.4.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1690680
  • Score
    100M100P100Q195910F
  • License MIT

React date & time picker

Package Exports

  • rc-picker
  • rc-picker/es/generate/dayjs
  • rc-picker/es/generate/dayjs.js
  • rc-picker/es/generate/moment
  • rc-picker/es/generate/moment.js
  • rc-picker/es/index.js
  • rc-picker/es/locale/ar_EG
  • rc-picker/es/locale/ar_EG.js
  • rc-picker/es/locale/az_AZ
  • rc-picker/es/locale/az_AZ.js
  • rc-picker/es/locale/bg_BG
  • rc-picker/es/locale/bg_BG.js
  • rc-picker/es/locale/bn_BD
  • rc-picker/es/locale/bn_BD.js
  • rc-picker/es/locale/by_BY
  • rc-picker/es/locale/by_BY.js
  • rc-picker/es/locale/ca_ES
  • rc-picker/es/locale/ca_ES.js
  • rc-picker/es/locale/cs_CZ
  • rc-picker/es/locale/cs_CZ.js
  • rc-picker/es/locale/da_DK
  • rc-picker/es/locale/da_DK.js
  • rc-picker/es/locale/de_DE
  • rc-picker/es/locale/de_DE.js
  • rc-picker/es/locale/el_GR
  • rc-picker/es/locale/el_GR.js
  • rc-picker/es/locale/en_GB
  • rc-picker/es/locale/en_GB.js
  • rc-picker/es/locale/en_US
  • rc-picker/es/locale/en_US.js
  • rc-picker/es/locale/es_ES
  • rc-picker/es/locale/es_ES.js
  • rc-picker/es/locale/et_EE
  • rc-picker/es/locale/et_EE.js
  • rc-picker/es/locale/eu_ES
  • rc-picker/es/locale/eu_ES.js
  • rc-picker/es/locale/fa_IR
  • rc-picker/es/locale/fa_IR.js
  • rc-picker/es/locale/fi_FI
  • rc-picker/es/locale/fi_FI.js
  • rc-picker/es/locale/fr_BE
  • rc-picker/es/locale/fr_BE.js
  • rc-picker/es/locale/fr_CA
  • rc-picker/es/locale/fr_CA.js
  • rc-picker/es/locale/fr_FR
  • rc-picker/es/locale/fr_FR.js
  • rc-picker/es/locale/ga_IE
  • rc-picker/es/locale/ga_IE.js
  • rc-picker/es/locale/gl_ES
  • rc-picker/es/locale/gl_ES.js
  • rc-picker/es/locale/he_IL
  • rc-picker/es/locale/he_IL.js
  • rc-picker/es/locale/hi_IN
  • rc-picker/es/locale/hi_IN.js
  • rc-picker/es/locale/hr_HR
  • rc-picker/es/locale/hr_HR.js
  • rc-picker/es/locale/hu_HU
  • rc-picker/es/locale/hu_HU.js
  • rc-picker/es/locale/id_ID
  • rc-picker/es/locale/id_ID.js
  • rc-picker/es/locale/is_IS
  • rc-picker/es/locale/is_IS.js
  • rc-picker/es/locale/it_IT
  • rc-picker/es/locale/it_IT.js
  • rc-picker/es/locale/ja_JP
  • rc-picker/es/locale/ja_JP.js
  • rc-picker/es/locale/ka_GE
  • rc-picker/es/locale/ka_GE.js
  • rc-picker/es/locale/kk_KZ
  • rc-picker/es/locale/kk_KZ.js
  • rc-picker/es/locale/km_KH
  • rc-picker/es/locale/km_KH.js
  • rc-picker/es/locale/kmr_IQ
  • rc-picker/es/locale/kmr_IQ.js
  • rc-picker/es/locale/kn_IN
  • rc-picker/es/locale/kn_IN.js
  • rc-picker/es/locale/ko_KR
  • rc-picker/es/locale/ko_KR.js
  • rc-picker/es/locale/lt_LT
  • rc-picker/es/locale/lt_LT.js
  • rc-picker/es/locale/lv_LV
  • rc-picker/es/locale/lv_LV.js
  • rc-picker/es/locale/mk_MK
  • rc-picker/es/locale/mk_MK.js
  • rc-picker/es/locale/ml_IN
  • rc-picker/es/locale/ml_IN.js
  • rc-picker/es/locale/mn_MN
  • rc-picker/es/locale/mn_MN.js
  • rc-picker/es/locale/ms_MY
  • rc-picker/es/locale/ms_MY.js
  • rc-picker/es/locale/my_MM
  • rc-picker/es/locale/my_MM.js
  • rc-picker/es/locale/nb_NO
  • rc-picker/es/locale/nb_NO.js
  • rc-picker/es/locale/nl_BE
  • rc-picker/es/locale/nl_BE.js
  • rc-picker/es/locale/nl_NL
  • rc-picker/es/locale/nl_NL.js
  • rc-picker/es/locale/pl_PL
  • rc-picker/es/locale/pl_PL.js
  • rc-picker/es/locale/pt_BR
  • rc-picker/es/locale/pt_BR.js
  • rc-picker/es/locale/pt_PT
  • rc-picker/es/locale/pt_PT.js
  • rc-picker/es/locale/ro_RO
  • rc-picker/es/locale/ro_RO.js
  • rc-picker/es/locale/ru_RU
  • rc-picker/es/locale/ru_RU.js
  • rc-picker/es/locale/si_LK
  • rc-picker/es/locale/si_LK.js
  • rc-picker/es/locale/sk_SK
  • rc-picker/es/locale/sk_SK.js
  • rc-picker/es/locale/sr_RS
  • rc-picker/es/locale/sr_RS.js
  • rc-picker/es/locale/sv_SE
  • rc-picker/es/locale/sv_SE.js
  • rc-picker/es/locale/ta_IN
  • rc-picker/es/locale/ta_IN.js
  • rc-picker/es/locale/th_TH
  • rc-picker/es/locale/th_TH.js
  • rc-picker/es/locale/tk_TK
  • rc-picker/es/locale/tk_TK.js
  • rc-picker/es/locale/tr_TR
  • rc-picker/es/locale/tr_TR.js
  • rc-picker/es/locale/uk_UA
  • rc-picker/es/locale/uk_UA.js
  • rc-picker/es/locale/ur_PK
  • rc-picker/es/locale/ur_PK.js
  • rc-picker/es/locale/vi_VN
  • rc-picker/es/locale/vi_VN.js
  • rc-picker/es/locale/zh_CN
  • rc-picker/es/locale/zh_CN.js
  • rc-picker/es/locale/zh_TW
  • rc-picker/es/locale/zh_TW.js
  • rc-picker/lib/generate/dateFns
  • rc-picker/lib/generate/dateFns.js
  • rc-picker/lib/generate/dayjs
  • rc-picker/lib/generate/dayjs.js
  • rc-picker/lib/generate/moment
  • rc-picker/lib/generate/moment.js
  • rc-picker/lib/index.js
  • rc-picker/lib/locale/ar_EG
  • rc-picker/lib/locale/ar_EG.js
  • rc-picker/lib/locale/az_AZ
  • rc-picker/lib/locale/az_AZ.js
  • rc-picker/lib/locale/bg_BG
  • rc-picker/lib/locale/bg_BG.js
  • rc-picker/lib/locale/bn_BD
  • rc-picker/lib/locale/bn_BD.js
  • rc-picker/lib/locale/by_BY
  • rc-picker/lib/locale/by_BY.js
  • rc-picker/lib/locale/ca_ES
  • rc-picker/lib/locale/ca_ES.js
  • rc-picker/lib/locale/cs_CZ
  • rc-picker/lib/locale/cs_CZ.js
  • rc-picker/lib/locale/da_DK
  • rc-picker/lib/locale/da_DK.js
  • rc-picker/lib/locale/de_DE
  • rc-picker/lib/locale/de_DE.js
  • rc-picker/lib/locale/el_GR
  • rc-picker/lib/locale/el_GR.js
  • rc-picker/lib/locale/en_GB
  • rc-picker/lib/locale/en_GB.js
  • rc-picker/lib/locale/en_US
  • rc-picker/lib/locale/en_US.js
  • rc-picker/lib/locale/es_ES
  • rc-picker/lib/locale/es_ES.js
  • rc-picker/lib/locale/et_EE
  • rc-picker/lib/locale/et_EE.js
  • rc-picker/lib/locale/eu_ES
  • rc-picker/lib/locale/eu_ES.js
  • rc-picker/lib/locale/fa_IR
  • rc-picker/lib/locale/fa_IR.js
  • rc-picker/lib/locale/fi_FI
  • rc-picker/lib/locale/fi_FI.js
  • rc-picker/lib/locale/fr_BE
  • rc-picker/lib/locale/fr_BE.js
  • rc-picker/lib/locale/fr_CA
  • rc-picker/lib/locale/fr_CA.js
  • rc-picker/lib/locale/fr_FR
  • rc-picker/lib/locale/fr_FR.js
  • rc-picker/lib/locale/ga_IE
  • rc-picker/lib/locale/ga_IE.js
  • rc-picker/lib/locale/gl_ES
  • rc-picker/lib/locale/gl_ES.js
  • rc-picker/lib/locale/he_IL
  • rc-picker/lib/locale/he_IL.js
  • rc-picker/lib/locale/hi_IN
  • rc-picker/lib/locale/hi_IN.js
  • rc-picker/lib/locale/hr_HR
  • rc-picker/lib/locale/hr_HR.js
  • rc-picker/lib/locale/hu_HU
  • rc-picker/lib/locale/hu_HU.js
  • rc-picker/lib/locale/id_ID
  • rc-picker/lib/locale/id_ID.js
  • rc-picker/lib/locale/is_IS
  • rc-picker/lib/locale/is_IS.js
  • rc-picker/lib/locale/it_IT
  • rc-picker/lib/locale/it_IT.js
  • rc-picker/lib/locale/ja_JP
  • rc-picker/lib/locale/ja_JP.js
  • rc-picker/lib/locale/ka_GE
  • rc-picker/lib/locale/ka_GE.js
  • rc-picker/lib/locale/kk_KZ
  • rc-picker/lib/locale/kk_KZ.js
  • rc-picker/lib/locale/km_KH
  • rc-picker/lib/locale/km_KH.js
  • rc-picker/lib/locale/kmr_IQ
  • rc-picker/lib/locale/kmr_IQ.js
  • rc-picker/lib/locale/kn_IN
  • rc-picker/lib/locale/kn_IN.js
  • rc-picker/lib/locale/ko_KR
  • rc-picker/lib/locale/ko_KR.js
  • rc-picker/lib/locale/lt_LT
  • rc-picker/lib/locale/lt_LT.js
  • rc-picker/lib/locale/lv_LV
  • rc-picker/lib/locale/lv_LV.js
  • rc-picker/lib/locale/mk_MK
  • rc-picker/lib/locale/mk_MK.js
  • rc-picker/lib/locale/ml_IN
  • rc-picker/lib/locale/ml_IN.js
  • rc-picker/lib/locale/mn_MN
  • rc-picker/lib/locale/mn_MN.js
  • rc-picker/lib/locale/ms_MY
  • rc-picker/lib/locale/ms_MY.js
  • rc-picker/lib/locale/my_MM
  • rc-picker/lib/locale/my_MM.js
  • rc-picker/lib/locale/nb_NO
  • rc-picker/lib/locale/nb_NO.js
  • rc-picker/lib/locale/nl_BE
  • rc-picker/lib/locale/nl_BE.js
  • rc-picker/lib/locale/nl_NL
  • rc-picker/lib/locale/nl_NL.js
  • rc-picker/lib/locale/pl_PL
  • rc-picker/lib/locale/pl_PL.js
  • rc-picker/lib/locale/pt_BR
  • rc-picker/lib/locale/pt_BR.js
  • rc-picker/lib/locale/pt_PT
  • rc-picker/lib/locale/pt_PT.js
  • rc-picker/lib/locale/ro_RO
  • rc-picker/lib/locale/ro_RO.js
  • rc-picker/lib/locale/ru_RU
  • rc-picker/lib/locale/ru_RU.js
  • rc-picker/lib/locale/si_LK
  • rc-picker/lib/locale/si_LK.js
  • rc-picker/lib/locale/sk_SK
  • rc-picker/lib/locale/sk_SK.js
  • rc-picker/lib/locale/sr_RS
  • rc-picker/lib/locale/sr_RS.js
  • rc-picker/lib/locale/sv_SE
  • rc-picker/lib/locale/sv_SE.js
  • rc-picker/lib/locale/ta_IN
  • rc-picker/lib/locale/ta_IN.js
  • rc-picker/lib/locale/th_TH
  • rc-picker/lib/locale/th_TH.js
  • rc-picker/lib/locale/tk_TK
  • rc-picker/lib/locale/tk_TK.js
  • rc-picker/lib/locale/tr_TR
  • rc-picker/lib/locale/tr_TR.js
  • rc-picker/lib/locale/uk_UA
  • rc-picker/lib/locale/uk_UA.js
  • rc-picker/lib/locale/ur_PK
  • rc-picker/lib/locale/ur_PK.js
  • rc-picker/lib/locale/vi_VN
  • rc-picker/lib/locale/vi_VN.js
  • rc-picker/lib/locale/zh_CN
  • rc-picker/lib/locale/zh_CN.js
  • rc-picker/lib/locale/zh_TW
  • rc-picker/lib/locale/zh_TW.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rc-picker

NPM version build status Codecov 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

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.