rc-picker

4.11.3 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

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

error TypeError: dayjs is not a function ↓

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

fix

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

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

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

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

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

Warnings

breaking 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. ↓

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

gotcha 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. ↓

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

gotcha RangePicker 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').

breaking In 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 /> }}.

deprecated Deprecated: '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'.

gotcha The '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={{}}.

gotcha 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. ↓

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

Install

npm install rc-picker

yarn add rc-picker

pnpm add rc-picker

Imports

Picker
wrong
```
import { Picker } from 'rc-picker'
```
correct
```
import Picker from 'rc-picker'
```
Default export is Picker. Named export 'Picker' is not available; must use default import.
RangePicker
wrong
```
import { RangePicker } from 'rc-picker'
```
correct
```
import RangePicker from 'rc-picker/es/RangePicker'
```
RangePicker is a separate file export, not a named export from main module. Use path import.
typePicker
wrong
```
import { PickerMode } from 'rc-picker'
```
correct
```
import type { PickerMode } from 'rc-picker/es/interface'
```
Type definitions are in subpath exports; import from 'rc-picker/es/interface' (or 'rc-picker/lib/interface' for CJS).
defaultLocale
wrong
```
import { enUS } from 'rc-picker/locale'
```
correct
```
import enUS from 'rc-picker/lib/locale/en_US'
```
Locale objects are in lib/locale subdirectory. Use path import without destructuring.

Quickstart

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'));