React Datepicker

A simple and reusable datepicker component for React
Alternatives To React Datepicker
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Dates12,1751,749608a month ago164January 29, 2020611mitJavaScript
An easily internationalizable, mobile-friendly datepicker library for the web
React Datepicker7,6183,3972,3052 days ago167November 30, 2023325mitJavaScript
A simple and reusable datepicker component for React
React Day Picker5,4571,4939813 days ago220October 18, 202333mitTypeScript
DayPicker is a customizable date picker component for React, with native TypeScript support.
React Infinite Calendar3,564119314 years ago42May 09, 201777mitJavaScript
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
Mui X3,17591221 hours ago100December 04, 20231,017TypeScript
MUI X: Build data-rich applications using a growing list of advanced React components.
React Native Modal Datetime Picker2,8524881514 days ago96August 18, 202310mitJavaScript
A React-Native datetime-picker for Android and iOS
React Native Datepicker1,9628261753 years ago27April 22, 2018260mitJavaScript
react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS
React Input Enhancements1,3792515a year ago45May 06, 202025mitJavaScript
Set of enhancements for input control
Obsidian Db Folder982
3 days ago173mitTypeScript
Obsidian Plugin to Allow Notion like database based on folders
React Modern Calendar Datepicker9351423 months ago22July 03, 2020161mitJavaScript
A modern, beautiful, customizable date picker for React
Alternatives To React Datepicker
Select To Compare

Alternative Project Comparisons

React Date Picker

npm version Test suite codecov Downloads

A simple and reusable Datepicker component for React (Demo)


The package can be installed via npm:

npm install react-datepicker --save

Or via yarn:

yarn add react-datepicker

Youll need to install React and PropTypes separately since those dependencies arent included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).

import React, { useState } from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />


The most basic use of the DatePicker can be described with:

<DatePicker selected={startdate} onChange={(date) => setStartDate(date)} />

You can use onSelect event handler which fires each time some calendar date has been selected

  onSelect={handleDateSelect} //when day is clicked
  onChange={handleDateChange} //only when value has changed

onClickOutside handler may be useful to close datepicker in inline mode

See here for a full list of props that may be passed to the component. Examples are given on the main website.

Time picker

You can also include a time picker by adding the showTimeSelect prop


Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)

More examples of how to use the time picker are given on the main website


The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:

  • registerLocale (string, object): loads an imported locale object from date-fns
  • setDefaultLocale (string): sets a registered locale as the default for all datepicker instances
  • getDefaultLocale: returns a string showing the currently set default locale
import { registerLocale, setDefaultLocale } from  "react-datepicker";
import es from 'date-fns/locale/es';
registerLocale('es', es)


Locales can be changed in the following way:

  • Globally - setDefaultLocale('es');



We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.

Latest compatible versions:

  • React 16 or newer: React-datepicker v2.9.4 and newer
  • React 15.5: React-datepicker v2.9.3
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2


Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.

Browser Support

The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.

Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.

Local Development

The main branch contains the latest version of the Datepicker component.

To begin local development:

  1. yarn install
  2. yarn build-dev
  3. yarn start

The last step starts documentation app as a simple webserver on http://localhost:3000.

You can run yarn test to execute the test suite and linters. To help you develop the component weve set up some tests that cover the basic functionality (can be found in /tests). Even though were big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when youre adding new functionality.

The examples

The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.


Keyboard support

  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • PgDn: Move to the next month.
  • Home: Move to the previous year.
  • End: Move to the next year.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)

For month picker

  • Left: Move to the previous month.
  • Right: Move to the next month.
  • Enter: Select date and close the calendar


Copyright (c) 2014-2023 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.

Popular Datepicker Projects
Popular Reactjs Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.