Exploring the top React date pickers

Editor’s note: This guide to the top React date pickers was last updated by Chinwike Maduabuchi on 19 October 2026 to cover maintained React date pickers, add newer options, and clarify React compatibility. We also refreshed the code examples and comparison table to help you choose a library for your project.

A React date picker lets users enter a date or choose one from a calendar. The right library depends on whether you need a simple date field, a booking range, or a date and time picker that fits an existing design system.

In this post, I’ll walk through 10 options and the trade-offs that matter when choosing one. If your app already uses Material UI, Ant Design, Carbon, or Mantine, start with that system’s picker. For a custom interface, consider React DayPicker, shadcn/ui, or React Aria Components.

What is a React date picker?

A React date picker combines date selection with features such as calendar navigation, disabled dates, and localized formatting. Some libraries provide a complete input and calendar popover; others supply a calendar that you connect to your own input.

Using an existing component can save you from implementing several difficult details:

• Date entry: Guide users toward the expected format and handle incomplete or invalid values
• Localization: Display dates, month names, and weekday labels for different locales
• Keyboard and screen reader support: Reuse navigation and focus behavior rather than building it from scratch
• Selection rules: Restrict available dates or support a start and end date
• Consistent styling: Match other form controls in your application

These features still need to be configured and tested in your app. A picker cannot decide whether a booking is valid or guarantee that your form is accessible.

For a straightforward date field, consider a native <input type="date"> before adding a dependency. A library becomes more useful when you need a custom calendar, range selection, or behavior the native input doesn’t provide.

The examples below use free components. Some additional features, including MUI’s range pickers, require a paid license.

Comparing the React date pickers

This table compares the versions discussed below, checked in October 2026. “Date range” distinguishes a built-in selection mode from a separate component or package.

Library	Good fit for	Date range	Date handling and dependencies	React 18 and 19
MUI X	Apps using Material UI	Paid Pro components	Material UI plus a supported date adapter	Both
React DayPicker	Custom calendars and selection rules	Built-in mode	Native Date values; date-fns internally	Both
Carbon	Apps using IBM’s design system	Built-in mode	@carbon/react, Sass, and flatpickr internally	Both
React-Date-Picker	A date input with a calendar	Separate companion package	Native Date values; React-Calendar internally	Both
React Datepicker (HackerOne)	Date and time selection without adopting a UI system	Built-in options	Native Date values; date-fns internally	Both
Ant Design	Apps using Ant Design	DatePicker.RangePicker	antd; Day.js by default	Both
Mantine	Apps using Mantine	Built-in mode	Mantine core packages and Day.js	v9 requires React 19.2+; use v8 for React 18
HeroUI	Styled, segmented date fields	Separate DateRangePicker component	HeroUI, Tailwind CSS, and @internationalized/date	v3 requires React 19; v2 supports React 18
shadcn/ui	Projects that want editable component source	Calendar range mode	Local component code, DayPicker, and Tailwind CSS in the Radix example	Depends on the generated components and dependencies
React Aria Components	Custom designs with detailed accessibility and internationalization APIs	Separate DateRangePicker component	react-aria-components; @internationalized/date values	Both

Accessibility is not a useful yes/no score here. The libraries provide different behaviors and configuration options, and your labels, validation messages, and customizations affect the result. DayPicker documents WCAG 2.1 AA support, while Carbon publishes accessibility test results for its date picker. Neither replaces testing your finished form.

The examples assume an existing React app. JSX examples use JavaScript; TSX examples include TypeScript annotations. In a framework that uses React Server Components, put interactive pickers behind a client component boundary.

MUI X date and time pickers

If you’re already using Material UI, MUI X date and time pickers are a natural fit. They follow the same design conventions and support theme customization through Material UI’s createTheme() API.

The free, MIT-licensed @mui/x-date-pickers package includes date, time, and date-time pickers. Range components are part of @mui/x-date-pickers-pro and require a paid license. Check that distinction before choosing MUI for a booking or reporting interface.

You can use Day.js, date-fns, Luxon, or Moment.js through the corresponding adapter. Here’s a basic setup with Day.js:

npm install dayjs @mui/x-date-pickers @mui/material @emotion/styled @emotion/react

import React from "react";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export default function DatePickerMaterialUI() {
  return (
    <div>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker label="Appointment date" />
      </LocalizationProvider>
    </div>
  );
}

Key features:

• Material UI styling and theme integration
• Date, time, and date-time components
• Desktop and mobile picker variants
• Adapters for four date libraries

Compatibility: MUI X v9.15.0 lists React 17, 18, and 19 as supported peers. You also need a compatible Material UI version and date library; follow the installation guide when upgrading.

React DayPicker

React DayPicker is a good starting point when you want a calendar without adopting a full UI library. It supports single dates, multiple dates, and ranges, with styles you can replace or extend.

Its custom modifiers let you mark dates with application-specific states, such as available booking days. It uses date-fns internally and works with native Date values.

DayPicker is a calendar component. If you want a text input and popover, you’ll need to compose those around it; the documentation includes an input integration guide.

For new v10 projects, the recommended package name is @daypicker/react. The older react-day-picker name remains available for compatibility:

npm install @daypicker/react

import React from "react";
import { DayPicker } from "@daypicker/react";
import "@daypicker/react/style.css";

export default function ReactDayPicker() {
  const [selected, setSelected] = React.useState();
  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
    />
  );
}

Key features:

• Single, multiple, and range selection
• Custom modifiers and disabled dates
• Locale and time zone configuration
• Keyboard navigation and documented accessibility support

Compatibility: DayPicker v10 supports React 16.8 and later. Check the v10 upgrade guide before changing imports or upgrading an existing integration.

Carbon Design System date picker

Carbon is IBM’s open source design system. Its React date picker is worth considering if your app already uses Carbon or you want its form controls and design conventions. Adding the system for a single date field requires more setup than a dedicated picker.

Carbon supports typed dates, calendar selection, and date ranges. Its calendar uses flatpickr internally, but you should configure it through Carbon’s documented API rather than assume every flatpickr option is exposed.

The components live in @carbon/react, which replaces the older carbon-components-react package. Install the packages and Sass:

npm install @carbon/react @carbon/icons-react
npm install -D sass

Import Carbon’s styles in a .scss file loaded by your app:

@use '@carbon/react';

Then render the picker:

import { DatePicker, DatePickerInput } from '@carbon/react';

export default function CarbonDatePicker() {
  return (
    <DatePicker
      datePickerType="single"
      onChange={(dates) => {
        console.log(dates);
      }}
    >
      <DatePickerInput
        id="date-picker-single"
        labelText="Appointment date"
        placeholder="mm/dd/yyyy"
      />
    </DatePicker>
  );
}

Key features:

• Carbon styling and form conventions
• Single-date and range selection
• Manual date entry
• A separate time picker component

Compatibility and accessibility: @carbon/react v1.118.0 supports React 18 and 19, among other versions. Carbon’s accessibility report records passing default-state automated tests and partial coverage for advanced states. Configure error messages and test your own interaction states.

Resources:

• Carbon date picker usage
• DatePicker examples and API
• flatpickr documentation

React-Date-Picker

React-Date-Picker, published as react-date-picker, combines a date input with a React-Calendar popover. It uses native Date values and does not require a general-purpose date library such as Day.js or Moment.js. It does have dependencies, including React-Calendar.

The calendar supports navigation through month, year, decade, and century views. The project’s prop reference is the place to check configuration options and accessible labels.

Install it with:

npm install react-date-picker

Import both stylesheets if you want the default appearance:

import { useState } from 'react';
import DatePicker from 'react-date-picker';
import 'react-date-picker/dist/DatePicker.css';
import 'react-calendar/dist/Calendar.css';

export default function MyDatePicker() {
  const [value, setValue] = useState(new Date());

  return (
    <DatePicker
      onChange={setValue}
      value={value}
      dayAriaLabel="Day"
      monthAriaLabel="Month"
      yearAriaLabel="Year"
      calendarAriaLabel="Open calendar"
      clearAriaLabel="Clear date"
      nativeInputAriaLabel="Date"
    />
  );
}

Key features:

• Segmented date input and calendar
• Multiple calendar navigation views
• Locale configuration
• No separate general-purpose date library requirement

Compatibility: React-Date-Picker v12.1.0 lists React 16.8, 17, 18, and 19 in its peer dependency ranges. See its package metadata when choosing a version.

Related packages: Time, date-time, and date-range pickers are separate companion packages, so don’t assume those interfaces are included in react-date-picker:

• React-Time-Picker
• React-DateRange-Picker
• React-DateTime-Picker

React Datepicker (HackerOne)

React Datepicker, published as react-datepicker, is a different project from react-date-picker above. It offers date, time, and range selection without requiring a broader UI component system.

Its documentation provides examples for custom inputs, highlighted days, date filters, and time selection. The component accepts native Date values and uses date-fns internally, including for localization.

The default CSS gives you a starting point. Expect to adjust it if your app has its own form styles, and check that those changes preserve visible focus and readable disabled states.

Install it with:

npm install react-datepicker

import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function HackeroneDatepicker() {
  const [date, setDate] = useState(new Date());

  return (
    <div>
      <label htmlFor="appointment-date">Appointment date</label>
      <DatePicker
        id="appointment-date"
        selected={date}
        onChange={setDate}
      />
    </div>
  );
}

Key features:

• Date, time, and date-range selection
• Custom inputs and date filters
• Locale support through date-fns
• Documented keyboard interactions

Compatibility and maintenance: React Datepicker v9.1.0 was published in December 2025 and lists React 16.9, 17, 18, and 19 in its peer dependency ranges. That release date alone doesn’t establish whether the project is a good long-term fit. Review the repository for unresolved issues that affect your use case.

Ant Design DatePicker

The Ant Design DatePicker ships in antd and fits naturally into an Ant Design application. You can use it independently of the other components, but you’ll still be adding the library and its design conventions to your project.

Day.js is the default date library, and picker values are Day.js objects. Ant Design also documents how to use other date libraries through a custom picker generator.

Use DatePicker.RangePicker for ranges and the showTime option when the selection needs a time. For a time-only field, Ant Design provides a separate TimePicker.

Install it with:

npm install antd

import { useState } from "react";
import { DatePicker } from "antd";

export default function AntDatepicker() {
  const [date, setDate] = useState(null);

  return (
    <div>
      <label htmlFor="ant-appointment-date">Appointment date</label>
      <DatePicker id="ant-appointment-date" value={date} onChange={setDate} />
    </div>
  );
}

Key features:

• Date and date-range pickers
• Optional time selection
• Ant Design styling and theme integration
• Locale configuration and editable documentation examples

Compatibility: Ant Design v6.6.6 requires React 18 or later. Check the migration guidance if you’re upgrading an existing Ant Design app.

Resources:

• DatePicker documentation
• TimePicker documentation

Mantine DatePicker

Mantine offers date components that share its theme and styling APIs. Its DatePicker renders an inline calendar; use DatePickerInput if you want an input that opens a calendar popover.

The date package needs Mantine’s core packages and Day.js. That makes it convenient in an existing Mantine app, but adding Mantine just for a calendar deserves a dependency review. Measure the bundle impact in your build before adding it solely for this component.

Mantine v9 requires React 19.2 or later. For React 18 projects, use Mantine v8:

npm install @mantine/core@8 @mantine/hooks@8 @mantine/dates@8 dayjs

For React 19.2 or later, install v9:

npm install @mantine/core@9 @mantine/hooks@9 @mantine/dates@9 dayjs

Keep the Mantine packages on matching versions. The following TypeScript example includes the provider and required styles. Since v8, date-only components use YYYY-MM-DD strings rather than native Date objects:

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import { useState } from 'react';
import { MantineProvider } from '@mantine/core';
import { DatePicker } from '@mantine/dates';

export default function Home() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <MantineProvider>
      <DatePicker value={value} onChange={setValue} />
    </MantineProvider>
  );
}

Key features:

• Single, multiple, and range selection
• Inline calendars and separate input components
• Shared Mantine styles and theme settings
• Configurable locales and first day of the week

Compatibility: The React minimum applies to all Mantine v9 packages. See the v9 release notes before upgrading; React 19.0 or 19.1 does not meet that requirement.

HeroUI DatePicker (formerly NextUI)

NextUI is now HeroUI, but updating the name is only part of the migration. HeroUI v3 requires React 19 and Tailwind CSS v4. Its composed API differs from the v2 @heroui/date-picker API.

The v3 DatePicker combines a segmented field with a calendar popover. It uses React Aria and @internationalized/date values. For ranges, use the separate DateRangePicker component.

With Tailwind CSS v4 already configured, install:

npm install @heroui/react @heroui/styles

Add these imports to your app’s main CSS file, in this order:

@import "tailwindcss";
@import "@heroui/styles";

Compose the picker:

import { Calendar, DateField, DatePicker, Label } from "@heroui/react";

export default function HeroDatePicker() {
  return (
    <DatePicker>
      <Label>Appointment date</Label>
      <DateField.Group>
        <DateField.Input>
          {(segment) => <DateField.Segment segment={segment} />}
        </DateField.Input>
        <DateField.Suffix>
          <DatePicker.Trigger>
            <DatePicker.TriggerIndicator />
          </DatePicker.Trigger>
        </DateField.Suffix>
      </DateField.Group>
      <DatePicker.Popover>
        <Calendar aria-label="Appointment date">
          <Calendar.Header>
            <Calendar.YearPickerTrigger>
              <Calendar.YearPickerTriggerHeading />
              <Calendar.YearPickerTriggerIndicator />
            </Calendar.YearPickerTrigger>
            <Calendar.NavButton slot="previous" />
            <Calendar.NavButton slot="next" />
          </Calendar.Header>
          <Calendar.Grid>
            <Calendar.GridHeader>
              {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}
            </Calendar.GridHeader>
            <Calendar.GridBody>
              {(date) => <Calendar.Cell date={date} />}
            </Calendar.GridBody>
          </Calendar.Grid>
        </Calendar>
      </DatePicker.Popover>
    </DatePicker>
  );
}

Key features:

---

---

• Styled, segmented date entry
• Composable field and calendar
• Locale-aware date display
• Validation and unavailable-date options

Compatibility: Follow the documentation for your installed major version. React 18 projects need the v2 line or another picker; the v3 example above is not a drop-in replacement for v2.

shadcn/ui date picker

shadcn/ui’s date picker combines local Popover and Calendar components. The Radix-based example below uses React DayPicker for the calendar and Tailwind CSS for styling.

The CLI adds component source to your project, which lets you change the implementation directly. That also makes updates your responsibility: review upstream changes before replacing files, and update dependencies separately. Re-running the CLI is not a substitute for checking your customizations.

Community projects add other interfaces, including date-time range selection. This date-time picker repository is one example; evaluate its maintenance separately from shadcn/ui:

With a Radix-based shadcn/ui project and Tailwind already configured, add the components and dependencies:

npx shadcn@latest add calendar popover button
npm install date-fns lucide-react

This TypeScript example assumes the usual @/components import alias:

"use client";

import { useState } from "react";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

export default function ShadcnDatePicker() {
  const [date, setDate] = useState<Date>();

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="w-[240px] justify-start text-left font-normal">
          <CalendarIcon />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </PopoverContent>
    </Popover>
  );
}

Key features:

• Editable component source
• Date and date-range examples
• Tailwind styling
• DayPicker selection and navigation behavior in this variant

Compatibility: Check the generated components and their dependencies together. shadcn/ui offers multiple component foundations; this example uses Radix’s asChild API and should not be copied unchanged into a different variant.

React Aria Components DatePicker

React Aria Components provides unstyled components from Adobe. You compose a date field, popover, and calendar, then add your own CSS or Tailwind styles.

It is worth considering when you need control over presentation along with keyboard navigation, focus management, screen reader behavior, and internationalization. Its date APIs support multiple calendar systems and use @internationalized/date values.

The trade-off is implementation work: you must style the components and their interaction states. React Aria supplies behavior and composition APIs, not a finished visual design.

Install the package:

npm install react-aria-components

Here’s the basic structure. Add styles before using it as a finished interface:

import {
  Button,
  Calendar,
  CalendarCell,
  CalendarGrid,
  DateInput,
  DatePicker,
  DateSegment,
  Dialog,
  Group,
  Heading,
  Label,
  Popover,
} from "react-aria-components";

export default function ReactAriaDatePicker() {
  return (
    <DatePicker>
      <Label>Date</Label>
      <Group>
        <DateInput>{(segment) => <DateSegment segment={segment} />}</DateInput>
        <Button aria-label="Open calendar">▼</Button>
      </Group>
      <Popover>
        <Dialog>
          <Calendar>
            <header>
              <Button slot="previous">◀</Button>
              <Heading />
              <Button slot="next">▶</Button>
            </header>
            <CalendarGrid>{(date) => <CalendarCell date={date} />}</CalendarGrid>
          </Calendar>
        </Dialog>
      </Popover>
    </DatePicker>
  );
}

Key features:

• Segmented date input and calendar popover
• Keyboard and screen reader interaction support
• Locale, calendar system, and time zone APIs
• Separate DateRangePicker and TimeField components

Compatibility: react-aria-components v1.22.1 declares React peer ranges that include React 18 and 19. If installation reports a conflict, check which dependency and version range caused it.

Which React date picker should you choose?

Start with the UI system your project already uses. MUI X, Ant Design, Carbon, Mantine, and HeroUI can reduce the styling work needed to make a date picker fit your forms. Check licensing and React requirements first, especially for MUI ranges, Mantine v9, and HeroUI v3.

If you don’t use a component system, I’d narrow the options by how much of the interface you want to build:

• React DayPicker: Choose it for a custom calendar with flexible selection rules, especially when you already have an input and popover
• React-Date-Picker: Consider it for a date input and calendar using native Date values, without adding a general-purpose date library
• React Datepicker: Consider it when you want date, time, and range options in a dedicated picker package
• shadcn/ui: Choose it if you want to edit the source and are comfortable maintaining that code alongside its dependencies
• React Aria Components: Consider it when internationalization and accessible interactions are central requirements and you’re prepared to build the visual design

Before committing, try the picker in one of your actual forms. Check typed input, empty values, validation errors, keyboard navigation, and the locales you support. For bookings or appointments, also decide how dates and time zones will be stored. A calendar that looks right in a demo still needs to match those requirements.

If you’ve used a date picker worth adding to this list, let us know in the comments.