{"id":18704,"library":"rc-picker","title":"rc-picker","description":"A React date & time picker component library (antd's picker) supporting multiple time libraries (dayjs, moment, date-fns, luxon). Current stable version is 4.11.3, with the package renamed to @rc-component/picker for the latest major versions. Offers range picking, datetime, month/year/week pickers. Freely configurable via props. Ships TypeScript definitions. Note: v4+ uses dayjs by default; older versions used moment.","status":"active","version":"4.11.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/picker","tags":["javascript","react","react-component","react-picker","typescript"],"install":[{"cmd":"npm install rc-picker","lang":"bash","label":"npm"},{"cmd":"yarn add rc-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required by React components","package":"react","optional":false},{"reason":"peer dependency required for rendering","package":"react-dom","optional":false},{"reason":"peer dependency: date library (at least one of dayjs/moment/date-fns/luxon must be installed)","package":"dayjs","optional":true},{"reason":"peer dependency: alternative date library","package":"moment","optional":true},{"reason":"peer dependency: alternative date library","package":"date-fns","optional":true},{"reason":"peer dependency: alternative date library","package":"luxon","optional":true}],"imports":[{"note":"Default export is Picker. Named export 'Picker' is not available; must use default import.","wrong":"import { Picker } from 'rc-picker'","symbol":"Picker","correct":"import Picker from 'rc-picker'"},{"note":"RangePicker is a separate file export, not a named export from main module. Use path import.","wrong":"import { RangePicker } from 'rc-picker'","symbol":"RangePicker","correct":"import RangePicker from 'rc-picker/es/RangePicker'"},{"note":"Type definitions are in subpath exports; import from 'rc-picker/es/interface' (or 'rc-picker/lib/interface' for CJS).","wrong":"import { PickerMode } from 'rc-picker'","symbol":"typePicker","correct":"import type { PickerMode } from 'rc-picker/es/interface'"},{"note":"Locale objects are in lib/locale subdirectory. Use path import without destructuring.","wrong":"import { enUS } from 'rc-picker/locale'","symbol":"defaultLocale","correct":"import enUS from 'rc-picker/lib/locale/en_US'"}],"quickstart":{"code":"import React from 'react';\nimport Picker from 'rc-picker';\nimport 'rc-picker/assets/index.css';\nimport dayjs from 'dayjs';\nimport { render } from 'react-dom';\n\nfunction App() {\n  const [value, setValue] = React.useState(null);\n  return (\n    <Picker\n      value={value}\n      onChange={(date, dateStr) => setValue(date)}\n      picker=\"date\"\n    />\n  );\n}\n\nrender(<App />, document.getElementById('root'));","lang":"typescript","description":"Basic usage: import Picker, include CSS, use dayjs for date handling, set picker prop to 'date' with controlled value and onChange."},"warnings":[{"fix":"Use 'npm install @rc-component/picker' and update imports to '@rc-component/picker'.","message":"Package renamed from 'rc-picker' to '@rc-component/picker' in v1.9.0+ (semver major? old v4 stays as rc-picker). Import from 'rc-picker' still works for v4.x but new versions use @rc-component/picker.","severity":"breaking","affected_versions":">=1.9.0"},{"fix":"Install dayjs: 'npm install dayjs'. Replace moment objects with dayjs objects.","message":"Default date library switched from moment to dayjs in v4. If upgrading from v3 to v4, you must install dayjs and possibly adjust date formatting.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Use 'import RangePicker from 'rc-picker/es/RangePicker'' (or 'lib/RangePicker').","message":"RangePicker is not exported from the main entry. Importing '{ RangePicker } from 'rc-picker'' will be undefined.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update allowClear usage: <Picker allowClear /> still works as shorthand, but if you need customization, use allowClear={{ clearIcon: <Icon /> }}.","message":"In v4.6.0, the 'allowClear' prop changed from boolean to accepting { clearIcon?: ReactNode }. Type errors may occur if directly assigning a boolean.","severity":"breaking","affected_versions":">=4.6.0"},{"fix":"Replace 'className' with 'rootClassName' and 'style' with 'rootStyle'.","message":"Deprecated: 'className' and 'style' on Pickers have been replaced by 'rootClassName' and 'rootStyle' (v4.10+). 'className' and 'style' will be removed in future.","severity":"deprecated","affected_versions":">=4.10.0"},{"fix":"For datetime picker, set picker=\"date\" and showTime={{}}.","message":"The 'picker' prop values are not 'datetime' but separate props: use 'showTime' to show datetime picker instead.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Explicitly set inputReadOnly if you want text input or read-only behavior.","message":"Default input is readOnly? inputReadOnly defaults to false but if not set, some versions may disable typing. Use inputReadOnly={true} to force read-only, or omit for editable.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"search_vec":"'/picker':37 '4.11.3':28 'antd':11 'compon':9,36,70 'configur':50 'current':24 'date':6,21 'date-fn':20 'datetim':46 'dayj':18,59 'default':61 'definit':55 'fns':22 'freeli':49 'javascript':66 'latest':40 'librari':10,17 'luxon':23 'major':41 'moment':19,65 'month/year/week':47 'multipl':15 'note':56 'offer':43 'older':62 'packag':31 'pick':45 'picker':3,8,13,48,73 'prop':52 'rang':44 'rc':2,35 'rc-compon':34 'rc-picker':1 'react':5,67,69,72 'react-compon':68 'react-pick':71 'renam':32 'ship':53 'stabl':25 'support':14 'time':7,16 'typescript':54,74 'use':58,64 'v4':57 'version':26,42,63 'via':51","created_at":"2026-04-25T07:39:41.990690+00:00","updated_at":"2026-04-25T07:39:41.990690+00:00","problems":[{"fix":"Check if CSS is present at 'rc-picker/dist/rc-picker.css' or install the @rc-component/picker version.","cause":"Missing import for CSS file; file may be in different path depending on bundler.","error":"Module not found: Can't resolve 'rc-picker/assets/index.css'"},{"fix":"Install dayjs: 'npm install dayjs' and import: 'import dayjs from 'dayjs';'","cause":"Missing dayjs import or incorrect version (dayjs < 1.0).","error":"TypeError: dayjs is not a function"},{"fix":"Ensure value/defaultValue is an instance of a supported date library (dayjs, moment, etc.), or handle null in onChange.","cause":"Date value is null/undefined when Picker expects a dayjs/moment object.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'isBefore')"},{"fix":"Update rc-picker to version >=4.10.0 or use 'className' instead if using older version.","cause":"Using rootClassName with an older version of rc-picker that doesn't support it.","error":"Warning: React does not recognize the `rootClassName` prop on a DOM element"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://react-component.github.io/picker","github":"https://github.com/react-component/picker","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rc-picker","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}