ant.design RangePicker动态限制日期选择范围需求分析：考虑到数据量太大，产品要求筛选时只能筛选一个月

需求分析：考虑到数据量太大，产品要求筛选时只能筛选一个月范围的数据；ant.design4.0提供了方式，但是本系统使用的ant.design是3.0版本。于是，网上搜索了一波，最终完成了需求；

（为了方便展示，将筛选范围改为三天，点击9号后，可往前选择或者往后选择，但是时间范围只能为三天）

实现如下：

引入DatePicker组件并在页面中展示；

<Form.Item label="需求完成时间">
    {getFieldDecorator('range-time-picker')(
         <RangePicker format="YYYY-MM-DD" disabledDate={disabledDate}  onCalendarChange={onCalendarChange}  onOpenChange={onOpenChange}/>,
     )}
</Form.Item>

通过如何用 onCalendarChange 和 disabledDate 来限制动态的日期区间选择；

// 点击日期选择组件获取选择时间并保存在state中
const onCalendarChange = (date) => {
    setState(preState => ({...preState, canClickDate:date}))
}
const disabledDate = (current) => {
  if (!canClickDate || canClickDate.length === 0) {
    return false;
  }
  // 获取选择时间前三天，后三天时间点并将其置灰限制
  return (current &&  current < moment(new Date(canClickDate)).subtract(3,'day')) ||  (current && current > moment(new Date(canClickDate)).add(3,'day'))
}
// 每次打开时间筛选组件重新选择时间
const onOpenChange = open => {
  if (open) {
    setState(preState => ({...preState,canClickDate:[]}))
  } 
}

以上代码相对较为简单，开发中主要在获取点击时间的前后三天时间点花费了较多的时间。需求是不断的变化的，可以参考moment文档，完成指定要求；

Moment.js文档：momentjs.cn/docs/#/get-…