React-daterangepicker NPM

react-daterangepicker

simple react-daterangepicker base on daterangepicker

DEMO

Click here

What achieved

calendar component base on moment.js
date simple picker
date range picker
date terminal picker

compatibility for IE

Because of using browserify, if you don't need hour and minute picker, it supports IE9.
If you need hour and minute picker, because of using range input, it supports IE10.

Usage

This component relies on moment and moment-range, so you should include them first

  $ npm install react-daterangepicker

Include js and css in /dist by tag , you can also require js by require('react-daterangepicker')

  setSingleTime: function() {
    this.setState({
      date: moment()
    });
  },
  
  clearSingleTime: function() {
    this.setState({
      date: null
    });
  },

  render() {
    return <ReactDateRangePicker
      lang={'zh-cn'} // using language
      numberOfCalendars={1} // displaying month number
      type={'sinple'} // single, range, terminal
      time={true} // want display & ctrl hours and minutes or not
      date={moment()} // default date for type single
      range={moment.range('')} // default range for type range or terminal
      minDate={moment('2015-10-01')} // limit minDate
      maxDate={moment(2015-10-09)} // limit maxDate
      onSelect={function(date) { // callback after select, return date or range with moment and moment-range object
        // ...
      }}/>,
  }