content: import React from 'react';
  import ReactDOM from 'react-dom';
  import RangePicker from 'react-daterange-picker';
  import Popover from 'react-bootstrap/lib/Popover';
  import Overlay from 'react-bootstrap/lib/Overlay';
  import InputGroup from 'react-bootstrap/lib/InputGroup';
  import FormControl from 'react-bootstrap/lib/FormControl';
  import Glyphicon from 'react-bootstrap/lib/Glyphicon';
  import moment from 'moment';
  /**
   * 日历范围控件
   */
  export default class MonthRangePicker extends React.Component {
    static propTypes = {
      placeholder: React.PropTypes.string,
      className: React.PropTypes.string,
      defaultValue: React.PropTypes.object,
      onSelect: React.PropTypes.func.isRequired,
      style: React.PropTypes.object,
    };
  
    constructor(props) {
      super(props);
      // value 文本的时间
      // defaultValue 给 rangepicker设定默认时间
      this.state = {
        value: this.props.defaultValue || '',
        show: false,
        defaultValue: moment.range(this.props.defaultValue.start, this.props.defaultValue.end) || '',
        first: true
      };
    }
  
    getTime = () => {
      const {start, end} = this.state.value || {};
      const startDate = start ? moment(start).format('YYYY-MM') : '';
      const endDate = end ? moment(end).format('YYYY-MM') : '';
      return startDate ? `${startDate} ~ ${endDate}` : '';
    }
  
    dateRangeSelect = (range) => {
      this.setState({
        value: range,
        show: false,
        first: false
      });
      const start = moment(range.start).format('YYYY-MM');
      const end = moment(range.end).format('YYYY-MM');
      this.props.onSelect(start, end);
      setTimeout(this.getTime);
    }
  
    initDate = () => { //  初始化
      this.setState({
        show: !this.state.show
      });
  
      setTimeout(this.getTime);
    }
  
    lastMonthDay = () => {
      const nowdays = new Date();
      let year = nowdays.getFullYear();
      let month = nowdays.getMonth();
      if ( month === 0) {
        month = 12;
        year = year - 1;
      }
      if (month < 10) {
        month = '0' + month;
      }
      // const firstDay = year + '-' + month + '-' + '01';//上个月的第一天
  
      const myDate = new Date(year, month, 0);
      const lastDay = year + '-' + month + '-' + myDate.getDate();
      return lastDay;
    }
  
    render() {
      const styles = require('./DateRangePicker.scss');
      const { placeholder, onSelect, style, ...others} = this.props;
      const lastDay = this.lastMonthDay();
      const popover = (
        <Popover className={styles.popover} id="popover-positioned-bottom-daterange-picker">
          <RangePicker
            numberOfCalendars={2}
            selectionType="range"
            minimumDate={new Date('2016-01-01')}
            maximumDate={new Date(lastDay)}
            locale="zh-cn"
            {...others}
            value={this.state.first ? this.state.defaultValue : this.state.value}
            onSelect={this.dateRangeSelect}
            />
        </Popover>
      );
  
      return (
        <div className={styles.root} style={style}>
          <InputGroup onClick={this.initDate} ref="dateRangePicker">
            <FormControl placeholder={placeholder} onChange={()=>{}} value={this.getTime()} />
            <InputGroup.Addon>
              <Glyphicon glyph="calendar" />
            </InputGroup.Addon>
          </InputGroup>
          <Overlay
            rootClose
            show={this.state.show}
            onHide={() => this.setState({show: false})}
            placement="bottom"
            container={this}
            target={() => ReactDOM.findDOMNode(this.refs.dateRangePicker)}
          >
          {popover}
          </Overlay>
        </div>
      );
    }
  }
  