{"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,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","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,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}