rc-picker

rc-picker is the modern, headless React picker engine for selecting dates, times, and date ranges. It provides the input field, popup panels, and interaction logic for single and range pickers, while remaining agnostic about the underlying date library: through pluggable generate configs it works with moment, Day.js, Luxon, or a custom adapter.

It covers the full spectrum of temporal selection — date, week, month, quarter, year, and time panels, multiple selection, keyboard navigation, disabled dates and times, and timezone-aware handling. As the successor to rc-calendar, rc-picker is the component that powers Ant Design’s DatePicker and TimePicker.

What You Get

• Single and range picker inputs with a popup panel, plus a standalone PickerPanel component
• Date, week, month, quarter, year, and time panel modes with a decade view
• Pluggable generate configs to run on moment, Day.js, Luxon, or a custom date adapter
• Keyboard navigation, multiple selection, disabled dates/times, and timezone-aware behaviour
• Headless, unstyled primitives designed to be themed by a design system

Common Use Cases

• Building a date picker input with a calendar popup for forms
• Adding a start/end date range picker with dual panels
• Selecting times or combined date-time values with disabled ranges
• Standing up month, quarter, or year pickers for reporting filters

Under The Hood

Architecture - The library is split into PickerInput (the field, range logic, and trigger wiring), PickerPanel (the actual date/time/month/year panels and their navigation), and PickerTrigger (popup positioning via @rc-component/trigger). The src/generate directory holds the date-library adapters (moment, dayjs, luxon) that expose a uniform interface consumed throughout, while src/hooks, src/utils, and src/locale provide shared behaviour and translations. src/interface.tsx defines the extensive typed contract.

Tech Stack - Written almost entirely in TypeScript (97%+), published as CommonJS (lib) and ES modules. Runtime dependencies are the modern rc-component primitives: @rc-component/trigger for popups, @rc-component/overflow, @rc-component/resize-observer, @rc-component/util, and clsx. Styling is layered on via Less.

Code Quality - Actively maintained (1000+ commits, 100 releases) with a large Testing-Library/Jest suite under tests/ covering range, time, keyboard, multiple selection, disabled times, timezone generation, and panels, tracked on Codecov and GitHub Actions. The generate-config abstraction and clear module separation reflect a mature, well-factored design.

API Design - The picker exposes a broad but coherent prop surface (value, onChange, picker mode, disabledDate, showTime, format, generateConfig) shared across single and range variants. Making the date library a plug-in via generateConfig is the key design decision: consumers pick their preferred date toolkit without the component taking a hard dependency, which is why Ant Design can ship both moment and dayjs builds.