react之antd Design日期选择器不可选日期详细介绍

最近有一个需求：两个日期选择器，一个选择开始时间，一个选择结束时间，选择完开始时间后确定不可选的结束时间，同样选择完结束时间后确定不可选的开始时间。百度了下没找到了一篇类似的文章：antd组件限定时间选择器日期范围，但是我这还需要不可选日期的结束日期是在本周或者本月的最后一天，开始日期是在本周或者本月的第一天，我就这上面那篇文章的基础上加以优化修改，附上codesandbox在线地址->优化后效果及代码。具体功能各位看官老爷们可以直接在线尝试，下面贴上代码，水下字数：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import moment from 'moment';
import { DatePicker } from 'antd';

const { log } = console;

let endTime = '';
let startTime = '';

// 开始时间选择器(监控记录日期变换)
const handleStartDateChange = (value, dateString) => {
  startTime = dateString;
  if(endTime){
    log(Number(endTime.slice(8,10)) - Number(startTime.slice(8,10)))
  }
};
// 结束时间选择器(监控记录日期变换)
const handleEndDateChange = (value, dateString) => {
  endTime = dateString;
  if(startTime){
    log(Number(endTime.slice(8,10)) - Number(startTime.slice(8,10)))
  }
};

// 结束时间可选范围
const handleEndDisabledDate = (current) => {
  let start = '';
  // 开始日期为本周第一天
  if(endTime){
    start = addDate(endTime, Number('-'+(new Date(endTime).getDay()===0 ? 6 : new Date(endTime).getDay()-1)))
  }
  // 判断结束日期是否跨月
  if(Number(endTime.slice(5,7)) !== Number(start.slice(5,7))){
    start = endTime.slice(0,8) + '01';
  }
  // log(start)
  if (endTime === undefined) {
    return null;
  } else if (endTime !== '') {
    return current > moment(endTime).endOf('day') || current < moment(start).startOf('day');                                                                 
  } else {
    return null; 
  }
}

// 开始时间可选范围
const handleStartDisabledDate = (current) => {
  let end = '';
  // 结束日期为本周最后一天
  if(startTime){
    end = addDate(startTime, 7 - (new Date(startTime).getDay()===0 ? 7 : new Date(startTime).getDay()))
  }
  // log(end)
  // 判断结束日期是否跨月
  if(Number(startTime.slice(5,7)) !== Number(end.slice(5,7))){
    end = startTime.slice(0,8) + new Date(startTime.slice(0,3),startTime.slice(5,7),0).getDate();
  }
  if (startTime === undefined) {
    return null;
  } else if (startTime !== '') {
    return current < moment(startTime) || current > moment(end).endOf('day');
  } else {
    return null;
  }
}

const addDate = (date, days) => {
  const d = new Date(date);
  d.setDate(d.getDate() + days);
  let mm = d.getMonth() + 1;
  mm = mm < 10 ? '0'+mm : mm;
  let dd = d.getDate();;
  dd = dd < 10 ? '0'+dd : dd;
  return d.getFullYear() + '-' + mm + '-' + dd;
}

ReactDOM.render(
  <div>
    <DatePicker
      placeholder='开始时间'
      format="YYYY-MM-DD"
      onChange={handleStartDateChange.bind(this)}
      disabledDate={handleEndDisabledDate.bind(this)}
    />
    <br />
    <br />
    <DatePicker
      placeholder='结束时间'
      format="YYYY-MM-DD"
      onChange={handleEndDateChange.bind(this)}
      disabledDate={handleStartDisabledDate.bind(this)}
    />
  </div>,
  document.getElementById('container'),
);

具体的思路就是修改开始或者结束的时间的时候，保存开始或者结束的时间，然后打开选择结束时间或者开始时间时调用结束不可选日期方法或者开始不可选日期方法对不可选的范围进行限定。 是不是有点绕，不懂得呢可以直接在codesandbox里操作下，打印输出下就全明白了。至于不可选方法里前两个判断就是为了完成结束日期是在本周或者本月的最后一天，开始日期是在本周或者本月的第一天的需求设置的。
好了今天的文章就水到这。