Small, stateless date / date range picker based on sweet { DayPicker } from react-dates by @airbnb.
We all know react-dates. I love this lib! But there are cases, you want to select a date range without the predefined Start Date and End Date input. I want to make this easier for you!
For warriors: check out DayPickerRangeController.
TL;DR; Demo
https://react-date-range-picker.now.sh/
Installation
yarn add react-dates-range-picker react-addons-shallow-compare
// or
npm install react-dates-range-picker react-addons-shallow-compare
react-addons-shallow-compareis required byreact-dates.
Usage
First, you have to import the component
import DatePicker from 'react-dates-range-picker';
Now all you have to do is set up some props. Let's start from date range.
export default MyView extends React.Component {
// our parent component will hold dates while DatePicker is stateless.
state = {
startDate: null,
endDate: null,
}
// this function will be executed after some date was selected in DatePicker.
handleDateSelect = (event) => {
// we will back into that later.
}
render() {
return (
<DatePicker
range
startDate={this.state.startDate}
endDate={this.state.startDate}
onDateSelect={this.handleDateSelect}
/>
)
}
}
Nothing fancy. If you're confused by state and handleDateSelect syntax read this article.
Let's back to handleDateSelect. This method is called out every time the start or end date should be changed, in the parent component. event argument is an Object with two keys: type and value.
type is a START or END string. value is a moment.js instance or null if date was removed.
// start date is 24-01-2017
{type:'START', value: moment('24-01-2017')}
// end date is 14-02-2017
{type:'END', value: moment('14-02-2017')}
// start date is unest
{type:'START', value: null}
// end date is unset
{type:'END', value: null}
While strings like START and END are uncool you can always
import { SelectTypes } from 'react-dates-range-picker'
The simplest implementation of the handleDateSelect method can be:
class MyView extends React.Component {
// ...
handleDateSelect = ({ type, value }) => {
const key = type === SelectTypes.START ? 'startDate' : 'endDate';
this.setState({ [key]: value });
};
// ...
}
Props
range - bool / false - select range or single date
months - number / 1 - number of visible months
initialVisibleMonth - number / 0 - first visible month. -1 previous, 1 next, etc.
onDateSelect - function / required - will be called every time start / end date was changed. For range={false} will always set type='START'.
minDate - moment / -Infinity - min. date that can be selected.
maxDate - moment / -Infinity - max. date that can be selected.
modifires - object / See Default modifiers section.
startDate - moment / null - selected start date. When range={false} is just selected date.
endDate - moment / null - selected end date. When range={false} is just selected date.
Info: All additional props will be passesd into inner
DayPickercomponent fromreact-dates.
Default modifiers
react-dates-range-picker will always add four modifiers:
selected-startselectedselected-endblocked
You can read more about modifiers in react-dates docs.
onDateSelect flow
- If date is blocked nothing is sent
- If
rangeistrue- If
startDateis not defined{type:'START', value}will be sent - If selected date is before
startDatetwo events are sent:{type:'START', value}{type:'END', null}
- If selected date is after
startDate- If both
startDateandendDateare defined{type:'START', value}{type:'END', null}
- Otherwise
{type:'END', value}will be sent
- If both
- If
- If
rangeisfalse{type:'START', value}will be sent every time date changes.