react-presetrange-datepicker v1.0.40

react-presetrange-datepicker

Install

install module

npm install react-presetrange-datepicker
#or
yarn add react-presetrange-datepicker

install peer dependencies

"moment": "^2.24.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-with-direction": "^1.3.0"
"react-dates": "^20.2.5"

How to use

import PresetDateRangePicker  from 'react-presetrange-datepicker';
import moment from 'moment';

const today = moment();
const tomorrow = moment().add(1, 'day');
const presets = [{
  text: 'Today',
  start: today,
  end: today,
},
{
  text: 'Tomorrow',
  start: tomorrow,
  end: tomorrow,
},
{
  text: 'Next Week',
  start: today,
  end: moment().add(1, 'week'),
},
{
  text: 'Next Month',
  start: today,
  end: moment().add(1, 'month'),
}];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: null,
      endDate: null,
      focusedInput: null,
    };
  }

  render() {
    return (
      <div className="App">
        <PresetDateRangePicker
          presets={presets}
          autoFocus
        />
      </div>
    );
  }
}
export default App;

Reference

1. http://airbnb.io/react-dates/?path=/story/presetdaterangepicker--default

2. https://github.com/airbnb/react-dates