A date range picker for your React app.
- Pick days, months, years, or even decades
- Supports virtually any language
- No moment.js needed
- Install by executing
npm install @wojtekmaj/react-daterange-picker
oryarn add @wojtekmaj/react-daterange-picker
. - Import by adding
import DateRangePicker from '@wojtekmaj/react-daterange-picker'
. - Use by adding
<DateRangePicker />
. UseonChange
prop for getting new values.
A minimal demo page can be found in sample
directory.
Online demo is also available!
React-DateRange-Picker will play nicely with React-Date-Picker, React-Time-Picker and React-DateTime-Picker. Check them out!
Your project needs to use React 16.3 or later. If you use an older version of React, please refer to the table below to find a suitable React-DateRange-Picker version.
React version | Newest compatible React-DateRange-Picker version |
---|---|
≥16.3 | latest |
≥16.0 | 2.x |
React-Calendar, on which React-DateRange-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of supporting only modern browsers.
If you need to support legacy browsers like Internet Explorer 10, you will need to use Intl.js or another Intl polyfill along with React-DateRange-Picker.
Add React-DateRange-Picker to your project by executing npm install @wojtekmaj/react-daterange-picker
or yarn add @wojtekmaj/react-daterange-picker
.
Here's an example of basic usage:
import React, { useState } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker';
function MyApp() {
const [value, onChange] = useState([new Date(), new Date()]);
return (
<div>
<DateRangePicker
onChange={onChange}
value={value}
/>
</div>
);
}
If you don't want to use default React-DateRange-Picker and React-Calendar styles, you can import React-DateRange-Picker without them by using import DateRangePicker from '@wojtekmaj/react-daterange-picker/dist/entry.nostyle';
instead.
Styles loaded by the default entry file are @wojtekmaj/react-daterange-picker/dist/DateRangePicker.css
and react-calendar/dist/Calendar.css
. You can copy them to your project to build your own upon them.
Displays an input field complete with custom inputs, native input, and a calendar.
Prop name | Description | Default value | Example values |
---|---|---|---|
autoFocus | Automatically focuses the input on mount. | n/a | true |
calendarAriaLabel | aria-label for the calendar button. |
n/a | "Toggle calendar" |
calendarClassName | Class name(s) that will be added along with "react-calendar" to the main React-Calendar <div> element. |
n/a |
|
calendarIcon | Content of the calendar button. Setting the value explicitly to null will hide the icon. |
(default icon) |
|
className | Class name(s) that will be added along with "react-daterange-picker" to the main React-DateRange-Picker <div> element. |
n/a |
|
clearAriaLabel | aria-label for the clear button. |
n/a | "Clear value" |
clearIcon | Content of the clear button. Setting the value explicitly to null will hide the icon. |
(default icon) |
|
closeCalendar | Whether to close the calendar on value selection. | true |
false |
dayAriaLabel | aria-label for the day input. |
n/a | "Day" |
dayPlaceholder | placeholder for the day input. |
"--" |
"dd" |
disabled | Whether the date range picker should be disabled. | false |
true |
disableCalendar | When set to true , will remove the calendar and the button toggling its visibility. |
false |
true |
format | Input format based on Unicode Technical Standard #35. Supported values are: y , M , MM , MMM , MMMM , d , dd . |
n/a | "y-MM-dd" |
isOpen | Whether the calendar should be opened. | false |
true |
locale | Locale that should be used by the date range picker and the calendar. Can be any IETF language tag. | User's browser settings | "hu-HU" |
maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected. | n/a | Date: new Date() |
maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be "month" , "year" , "decade" or "century" . |
"month" |
"year" |
minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected. | n/a | Date: new Date() |
minDetail | The least detailed calendar view that the user shall see. Can be "month" , "year" , "decade" or "century" . |
"century" |
"decade" |
monthAriaLabel | aria-label for the month input. |
n/a | "Month" |
monthPlaceholder | placeholder for the month input. |
"--" |
"mm" |
name | Input name prefix. Date from/Date to fields will be named "yourprefix_from" and "yourprefix_to" respectively. |
"daterange" |
"myCustomName" |
nativeInputAriaLabel | aria-label for the native date input. |
n/a | "Date" |
onCalendarClose | Function called when the calendar closes. | n/a | () => alert('Calendar closed') |
onCalendarOpen | Function called when the calendar opens. | n/a | () => alert('Calendar opened') |
onChange | Function called when the user clicks an item on the most detailed view available. | n/a | (value) => alert('New date is: ', value) |
openCalendarOnFocus | Whether to open the calendar on input focus. | true |
false |
rangeDivider | Divider between date inputs. | "–" |
" to " |
required | Whether date input should be required. | false |
true |
showLeadingZeros | Whether leading zeros should be rendered in date inputs. | false |
true |
value | Input value. | n/a |
|
yearAriaLabel | aria-label for the year input. |
n/a | "Year" |
yearPlaceholder | aria-label for the year input. |
"----" |
"yyyy" |
DateRangePicker component passes all props to React-Calendar, with the exception of className
(you can use calendarClassName
for that instead). There are tons of customizations you can do! For more information, see Calendar component props.
The MIT License.
![]() |
Wojciech Maj [email protected] https://wojtekmaj.pl |