前端实现一个时间区间内，再次单选功能，使用Antd组件库内日历组件Calendar

需求：需要先让用户选择一个时间区间，然后再这个时间区间中，让用户再次去单选其种特殊日期。

思路：

1.先用Antd组件库中日期选择DatePicker.RangePicker实现让用户选择时间区间

2.在选择完时间区间后，用这个时间区间，弹出一个在这个时间区间范围内的日历组件Calendar

3.通过Calendar组件（日历）的onSelect（点击事件）获得点击value，然后通过dateCellRender（自定义渲染日期单元格）将选中的时间给用户颜色提示

4.最后将日期选择，还有区间内时间传给后端

第一步：先用Antd组件库中日期选择DatePicker.RangePicker实现让用户选择时间区间

页面：  

代码： 

  archiveTime = async (date: any, dateString: any) => {  //日期改变
    //这时候  先弹框,并且暂存时间区间
    this.setState({
      restVis: true, //弹框
      dateString, //暂存时间区间
    })
  }

第二步，第三步

2.在选择完时间区间后，用这个时间区间，弹出一个在这个时间区间范围内的日历组件Calendar

3.通过Calendar组件（日历）的onSelect（点击事件）获得点击value，然后通过dateCellRender（自定义渲染日期单元格）将选中的时间给用户颜色提示

刚弹出：选中后：

弹框中装入一个日历组件 

 上面日历组件中用global改变组件样式

.backgrand {
  :global {
    .ant-fullcalendar-selected-day .ant-fullcalendar-value,
    .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value {
      background-color: #fff !important;
      color: #595959;
    }
  }
}

日历组件两个事件

onSelect = (date: any) => { // 点击选择日期回调
  const { restDay } = this.state; //选中值集合
  let vis = true  //判断这个值是否选中
  if (restDay && Array.isArray(restDay)) {
    restDay.map((item: any) => {
      if (item == moment(date).format('YYYY-MM-DD')) {
        vis = false
      }
    })
    if (vis) { restDay.push(moment(date).format('YYYY-MM-DD')) } //如果未选中  增加这个选中值
    if (!vis) { restDay.splice(restDay.indexOf(moment(date).format('YYYY-MM-DD')), 1) }//如果已选中  删除这个选中值
  }
  this.setState({ restDay })
}
dateCellRender = (val: any) => { //自定义渲染日期单元格，返回内容会被追加到单元格
  const { restDay } = this.state; //选中值集合
  if (restDay && Array.isArray(restDay) && restDay.length > 0 && restDay.indexOf(moment(val).format('YYYY-MM-DD')) > -1) {
    return 

      

    
  }
}

最终Modal弹框打开关闭事件,其中restDay，dateString就是最终用户一套花里胡哨操作后，我们最终需要得到两个参数

restHandleOk = async () => {
  const { dateString, restDay } = this.state
  await this.updateState({
    archiveStartTime: dateString[0],
    archiveEndTime: dateString[1],
  });
  console.log('此时单独选中：', restDay)
  console.log('此时时间区间:', dateString)
  this.restHandleCancel()
}
restHandleCancel = () => {
  this.setState({ restVis: false })
}