JAVASCRIPT

react js date range

import { DateRangePicker } from 'react-date-range';

class MyComponent extends Component {
  handleSelect(ranges){
    console.log(ranges);
    // {
    //   selection: {
    //     startDate: [native Date Object],
    //     endDate: [native Date Object],
    //   }
    // }
  }
  render(){
    const selectionRange = {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
    return (
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={this.handleSelect}
      />
    )
  }
}

react date range

npm install --save react date-fns

react date range

npm install --save react-date-range

date range picker react

<DateRangePicker>  <input type="text" className="form-control" /></DateRangePicker>

react date range picker

import { DateRangePicker } from 'rsuite';

react js date range

import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file