@signavio/react-day-picker
v3.3.1
Published
Flexible date picker component for React
Downloads
16
Readme
react-day-picker is a flexible date picker component for React.
- no external dependencies
- select days, ranges, whatever using CSS modifiers
- ready for localization, even with moment.js
- customizable style
- navigable via keyboard, ARIA support
Check out the examples to see its features.
Quick start
Installing via npm
npm install react-day-picker --save
Using unpkg CDN
<script src="https://unpkg.com/react-day-picker"></script>
Installing 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