react-day-picker is a flexible date picker component for React.
- no external dependencies
- select days, ranges, whatever using CSS modifiers
- ready for i18n, with moment.js or any other library
- customizable style
- navigable via keyboard, ARIA support
Check out the examples to see its features.
Quick start
Install via npm
npm install react-day-picker --save
Install via Bower
bower install react-day-picker --save
The bower package exposes a global DayPicker
variable.
Example
import React from 'react';
import DayPicker, { DateUtils } from "react-day-picker";
function sunday(day) {
return day.getDay() === 0;
}
class MyComponent extends React.Component {
state = {
selectedDay: new Date(),
}
handleDayClick(e, day, { selected, disabled }) {
if (disabled) {
return;
}
if (selected) {
this.setState({ selectedDay: null })
} else {
this.setState({ selectedDay: day });
}
},
render() {
return (
<DayPicker
initialMonth={ new Date(2016, 1) }
disabledDays={ sunday }
selectedDays={ day => DateUtils.isSameDay(this.state.selectedDay, day) }
onDayClick={ this.handleDayClick.bind(this) }
/>);
}
}
See Basic usage for a deeper explanation of the example above.
Docs and examples
Get support
- Tag with
react-day-picker
your questions on Stackoverflow - Join the Gitter room for immediate help
Contribute
- File bugs and feature requests in the issues page
- Check out the source code on Github
- Pull requests are welcome! If you are planning a pull request with lot of changes, please add an issue to discuss your idea first
- See how to start the project locally here