由于antd3和antd4版本不同，导致踩了rangePicker的坑

同样是<RangePick'>的引入，

<RangePick
    placeholder="请选择" 
    disabledDate={disableData} 
    format="YYYY-MM-DD" 
    onCalendarChange={var=>CalendarChange(var)} 
    onOpenChange={openChange}
/>

关于onCalendarChange={var=>CalendarChange(var)} 所传递的值：

在antd3中，如下图，不论是先选择开始日期还是结束日期，在只选择了一个的的时候，var的值是一个元素的数组，即var=[startDate]，当选择完起始值的时候，var=[startDate,endDate]。

在antd4中，如下图，当先选择开始日期时，在该值之前的日期会被禁用，此时var=[date0,undefined]；当先选择结束日期的时候，在该值之后的日期会被禁用，此时，var=[undefined,date1]。

因此，当我们需要对日期区间选择做动态改变的时候，就尤其要注意该数据结构的不同。

这里举例如何用 onCalendarChange 和 disabledDate 来限制动态的日期区间选择。

antd3

// 只允许选择未来的时间，且范围不超过一个月

const queryDisableDate = current => {
    if (!dates || dates.length === 0) {    
        return current < moment().endOf('day'); // 表示只允许选择未来时间
    }  
    return (    
        // 表示前后时间范围不超过1个月    
        current < moment(dates[0]).subtract(1, 'month') ||
        current > moment(dates[0]).add(1, 'month') ||
        current < moment().endOf('day')
    );
};
const onOpenChange = open => {
    if (open) {
        setDates([]);
    }
};

antd4

  // 只允许选择过去的时间，且范围不超过7天；

  const queryDisableDate = current => {
      if (!dates || dates.length === 0) {
          return current > moment().endOf('day');// 表示只允许选择未来时间
      }
      const tooLate =
      dates[0] && (current.diff(dates[0], 'days') > 6 || current > moment().endOf('day'));  // 表示开始时间后面不超过6天的范围
      const tooEarly = dates[1] && dates[1].diff(current, 'days') > 6; // 表示结束时间之前的不超过6天的范围
      return tooEarly || tooLate;
  };
const onOpenChange = open => {
    if (open) {
        setDates([]);
    }
};