A date 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 react-date-picker
oryarn add react-date-picker
. - Import by adding
import DatePicker from 'react-date-picker'
. - Use by adding
<DatePicker />
. UseonChange
prop for getting new values.
A minimal demo page can be found in sample
directory.
Online demo is also available!
React-Date-Picker will play nicely with 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-Date-Picker version.
React version | Newest compatible React-Date-Picker version |
---|---|
≥16.3 | latest |
≥16.0 | 7.x |
React-Calendar, on which React-Date-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-Date-Picker.
Add React-Date-Picker to your project by executing npm install react-date-picker
or yarn add react-date-picker
.
Here's an example of basic usage:
import React, { useState } from 'react';
import DatePicker from 'react-date-picker';
function MyApp() {
const [value, onChange] = useState(new Date());
return (
<div>
<DatePicker
onChange={onChange}
value={value}
/>
</div>
);
}
If you don't want to use default React-Date-Picker and React-Calendar styles, you can import React-Date-Picker without them by using import DatePicker from 'react-date-picker/dist/entry.nostyle';
instead.
Styles loaded by the default entry file are react-date-picker/dist/DatePicker.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-date-picker" to the main React-Date-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 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 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-Date-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-Date-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. | "date" |
"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) |
required | Whether date input should be required. | false |
true |
returnValue | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start" , "end" or "range" . The latter will cause an array with start and end values to be passed. |
"start" |
"range" |
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" |
DatePicker 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 kontakt@wojtekmaj.pl http://wojtekmaj.pl |
Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.
Thank you to all our backers! Become a backer and get your image on our README on GitHub.
Thank you to all our contributors that helped on this project!