react-day-picker-radium
v0.0.3
Published
Flexible date picker component for React with Radium
Downloads
11
Readme
react-day-picker with Radium styles
react-day-picker is a flexible date picker component for React.
- no external dependencies
- select days, ranges, whatever using CSS modifiers
- simple localization, even with moment.js
- customizable style and CSS Modules support
- navigable via keyboard, ARIA support
Check out the examples to see its features.
Quick start
Add the dependency to your project
npm install react-day-picker --save
# or with yarn:
yarn add react-day-picker
Using unpkg
Include the component without installing:
<script src="https://unpkg.com/react-day-picker/daypicker.min.js"></script>
See this jsfiddle as example.
Using bower
bower install react-day-picker
Example
import React from 'react';
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css"
function sundays(day) {
return day.getDay() === 0;
}
function today() {
return new Date();
}
class MyComponent extends React.Component {
state = {
selectedDay: today(),
}
constructor(props) {
super(props);
this.handleDayClick = this.handleDayClick.bind(this);
}
handleDayClick(day, { disabled, selected }) {
if (disabled) {
return;
}
this.setState({
selectedDay: selected ? null : day
})
},
render() {
return (
<DayPicker
initialMonth={ new Date(2017, 1) }
disabledDays={ sundays }
selectedDays={ this.state.selectedDay }
onDayClick={ this.handleDayClick }
/>);
}
}
See Basic usage for a deeper explanation of the example above.
Docs and examples
Get support
- Tag with
react-day-picker
your questions on Stack Overflow - Join the Gitter room for immediate help
- Tip: Fork https://jsfiddle.net/gpbl/fordjxht/6 to help us reproducing your problem
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