rc-picker

library4.11.3jsnpmunverified

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.

web-framework serialization

npm install rc-picker

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RC-PICKER

rc-picker

web-frameworkjavascriptv4.11.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Picker

✓ import Picker from 'rc-picker'

✗ import { Picker } from 'rc-picker'

Default export is Picker. Named export 'Picker' is not available; must use default import.

RangePicker

✓ import RangePicker from 'rc-picker/es/RangePicker'

✗ import { RangePicker } from 'rc-picker'

RangePicker is a separate file export, not a named export from main module. Use path import.

typePicker

✓ import type { PickerMode } from 'rc-picker/es/interface'

✗ import { PickerMode } from 'rc-picker'

Type definitions are in subpath exports; import from 'rc-picker/es/interface' (or 'rc-picker/lib/interface' for CJS).

defaultLocale

✓ import enUS from 'rc-picker/lib/locale/en_US'

✗ import { enUS } from 'rc-picker/locale'

Locale objects are in lib/locale subdirectory. Use path import without destructuring.

Basic usage: import Picker, include CSS, use dayjs for date handling, set picker prop to 'date' with controlled value and onChange.

import React from 'react'; import Picker from 'rc-picker'; import 'rc-picker/assets/index.css'; import dayjs from 'dayjs'; import { render } from 'react-dom'; function App() { const [value, setValue] = React.useState(null); return ( <Picker value={value} onChange={(date, dateStr) => setValue(date)} picker="date" /> ); } render(<App />, document.getElementById('root'));

Debug

Known issues

breakingPackage 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.

fix

Use 'npm install @rc-component/picker' and update imports to '@rc-component/picker'.

affects: >=1.9.0

gotchaDefault date library switched from moment to dayjs in v4. If upgrading from v3 to v4, you must install dayjs and possibly adjust date formatting.

fix

Install dayjs: 'npm install dayjs'. Replace moment objects with dayjs objects.

affects: >=4.0.0

gotchaRangePicker is not exported from the main entry. Importing '{ RangePicker } from 'rc-picker'' will be undefined.

fix

Use 'import RangePicker from 'rc-picker/es/RangePicker'' (or 'lib/RangePicker').

affects: >=1.0.0

breakingIn v4.6.0, the 'allowClear' prop changed from boolean to accepting { clearIcon?: ReactNode }. Type errors may occur if directly assigning a boolean.

fix

Update allowClear usage: <Picker allowClear /> still works as shorthand, but if you need customization, use allowClear={{ clearIcon: <Icon /> }}.

affects: >=4.6.0

deprecatedDeprecated: 'className' and 'style' on Pickers have been replaced by 'rootClassName' and 'rootStyle' (v4.10+). 'className' and 'style' will be removed in future.

fix

Replace 'className' with 'rootClassName' and 'style' with 'rootStyle'.

affects: >=4.10.0

gotchaThe 'picker' prop values are not 'datetime' but separate props: use 'showTime' to show datetime picker instead.

fix

For datetime picker, set picker="date" and showTime={{}}.

affects: >=1.0.0

gotchaDefault 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.

fix

Explicitly set inputReadOnly if you want text input or read-only behavior.

affects: >=4.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'rc-picker/assets/index.css'

Missing import for CSS file; file may be in different path depending on bundler.

fix

Check if CSS is present at 'rc-picker/dist/rc-picker.css' or install the @rc-component/picker version.

TypeError: dayjs is not a function

Missing dayjs import or incorrect version (dayjs < 1.0).

fix

Install dayjs: 'npm install dayjs' and import: 'import dayjs from 'dayjs';'

Uncaught TypeError: Cannot read properties of undefined (reading 'isBefore')

Date value is null/undefined when Picker expects a dayjs/moment object.

fix

Ensure value/defaultValue is an instance of a supported date library (dayjs, moment, etc.), or handle null in onChange.

Warning: React does not recognize the `rootClassName` prop on a DOM element

Using rootClassName with an older version of rc-picker that doesn't support it.

fix

Update rc-picker to version >=4.10.0 or use 'className' instead if using older version.

Upgrade

Version history

4.11.3latest on npm

Audit

Dependencies

reactrequiredpeer dependency required by React components

react-domrequiredpeer dependency required for rendering

dayjsoptionalpeer dependency: date library (at least one of dayjs/moment/date-fns/luxon must be installed)

momentoptionalpeer dependency: alternative date library

date-fnsoptionalpeer dependency: alternative date library

luxonoptionalpeer dependency: alternative date library

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/picker ↗

packagehttps://www.npmjs.com/package/rc-picker ↗

homepagehttps://react-component.github.io/picker ↗