react-dates
A React datepicker component that supports internationalization and works on mobile.
- Stars
- 12.2k
- Forks
- 1.7k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 2.6 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
react-dates is a JavaScript library of date-picker components for React web apps. It provides single-date and date-range pickers, plus a calendar controller, that you add to your own interface. The README describes it as internationalizable, accessible, and mobile-friendly.
- Add a start-date and end-date range selector to a booking form
- Add a single date picker to a form input
- Show an inline calendar that is always visible using the day-picker range controller
- Customize selected-day colors with an override stylesheet
Great for
- React developers who need a date or date-range picker in a web app
- Projects that need the picker to work in multiple languages and locales
- Teams that want to style the calendar by overriding CSS classes
- Developers who want to see live examples in the Storybook demo before adopting it
Not ideal for
- Projects not using React, since the components are built for React
- Teams that need a long-term supported version, because the README does not state a current release and the last push shown is 2024-04-09
- Apps that want a zero-dependency solution, because it requires peer packages such as moment and react
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm · React and react-dom · moment
Install the package
npm install --save react-datesInstall peer dependencies automatically
npx install-peerdeps react-dates - 2
Run it
- Import 'react-dates/initialize' at the top of your app
- Import the CSS file from 'react-dates/lib/css/_datepicker.css'
- Import DateRangePicker or SingleDatePicker from 'react-dates'
- Pass the required props such as startDate, endDate, onDatesChange, focusedInput, and onFocusChange
- 3
Get the most out of it
- Override styles with a stylesheet loaded after the default react-dates styles
- Use the optional input props such as placeholder text, showClearDates, and customInputIcon
- Use withPortal or withFullScreenPortal for mobile-style display
- Use the examples folder in the repository as a reference for wrapping pickers
- Set isRTL for right-to-left languages
Downloads
Strengths
- Provides multiple components: DateRangePicker, SingleDatePicker, and DayPickerRangeController
- Includes a live demo and Storybook for seeing props in action
- Uses the MIT license and has a large following (12,163 stars)
Trade-offs
- The README does not state a current release, and the repository shows no latest release
- Setup requires extra steps, including an initialize import and a CSS import
- Date handling relies on peer dependencies that must match versions
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-dates (this) | 12.2k | Library | intermediate | 2.6 years ago | React developers who need a date or date-range picker in a web app |
| flatpickr | 16.5k | Library | beginner | 2.3 years ago | Web developers who need a date or time input in a JavaScript app |
| tui.calendar | 12.7k | Library | intermediate | 2.4 years ago | Web developers adding a schedule view to an existing site or web app |
| react-color | 12.3k | Library | beginner | 2.8 years ago | React developers who need a color selection control in a web interface |
| fullcalendar | 20.7k | Library | intermediate | 21 days ago | Web developers adding a scheduling or event calendar to an existing site |
| luxon | 16.5k | Library | beginner | 3 months ago | JavaScript developers who need to work with dates and time zones in an app |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.