react-dates-presets
v1.1.0
Published
Preset picker based on `react-dates` - allows you to define preset ranges like `today`, `last week`, etc.
Downloads
14
Readme
react-dates-presets
Preset picker based on react-dates
- allows you to define preset ranges like today
, last week
, etc.
Demo & Examples
Live demo: streamfoundations.github.io/react-dates-presets/demo
Usage
render() {
const ranges = [
{ id: 'today', range: { startDate: moment(), endDate: moment() }, label: 'Today' },
{ id: '7_days', range: { startDate: moment().subtract(7, 'days'), endDate: moment() }, label: 'Last 7 days' },
{ id: '1_month', range: { startDate: moment().subtract(1, 'month'), endDate: moment() }, label: 'Last month' },
{ id: '2_months', range: { startDate: moment().subtract(2, 'months'), endDate: moment() }, label: 'Last 2 months' },
];
return (
<DatePresetPicker
value={this.props.value}
onChange={this.onChange}
ranges={ranges}
isOutsideRange={(date) => false /* allow future & past dates */}
/>
);
}
You can also check out working code in /demo/App.jsx.