react-datepicker
A simple and reusable datepicker component for React
A ready-made calendar date picker component for React apps that you drop into a form in a few lines of code, with optional time selection, multi-language support, and a small download size.
react-datepicker is a date picker component for React web applications. It provides a calendar popup that users click to choose a date, which you embed into a form or page in your app. The goal is straightforward: give your users a consistent, styled way to pick dates without building one from scratch.
Adding it to a project takes a few lines of code. You install the package, import the component and its CSS file, wire it to a piece of state in your React component, and you have a working calendar picker. A time selector can be enabled alongside the date picker by setting a single prop, and you can configure how frequently time options appear (defaulting to every 30 minutes).
The component supports localization through a date library called date-fns, which covers dozens of languages. Setting a locale changes how dates are displayed and formatted for users in different regions. Dates are stored and handled as standard JavaScript Date objects, which means they reflect the user's local timezone. The README notes a common issue where dates appear off by one day when sent to a server, and points to a guide explaining the timezone math behind it.
The package switched its internal date handling from Moment.js to date-fns starting with version 2.0.0, which significantly reduced the download size for apps that use it. It supports React 16 and newer and works in current versions of Chrome, Firefox, and Internet Explorer 10+.
A documentation site with live examples is available for browsing the full set of configuration options. The package is actively maintained and has a contribution guide for developers who want to add features or fix bugs.
Where it fits
- Add a calendar popup to a form in your React app so users can pick a date without typing it in manually.
- Enable a time selector alongside the date picker so users can choose both date and time from one component.
- Localize the date picker to display dates in a user's language by setting a locale from date-fns.
- Replace a larger date library like Moment.js with date-fns to reduce the amount of JavaScript your app downloads.