antd — DatePicker 给日期选择器添加范围限制

前言

当我们在开发的时候，会出现设置时间的需求，当然我们要保证设置的时间是有效的，这个时候就要给开始时间和结束时间，添加一些限制。比如结束时间要大于开始时间，开始时间的选择区间是当前时间之后。

antd DatePicker组件的api有disabledDate和disabledTime这两个属性，disabledDate控制天数，disabledTime控制时分秒。

核心代码如下：

function range(start, end) {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  }
  const onOk = (val) => {
    console.log(val);
  };

  function handleDisabledRangeTime (_, type) {
    const currentHours = moment().hours();// 当前小时
    const currentMinutes = moment().minutes();// 当前分
    const currentSeconds = moment().seconds();// 当前秒
    // 开始时间 
    if (type === 'start') {
      return {
        disabledHours: () => range(0, currentHours + 1),
        disabledMinutes: () => range(0, currentMinutes + 1),
        disabledSeconds: () => range(0, currentSeconds),
      };
    }
    // 结束时间
    return {
      disabledHours: () => range(0, currentHours + 1),
      disabledMinutes: () => range(0, currentMinutes + 1),
      disabledSeconds: () => range(0, currentSeconds + 1),
    };
  };
  // 对天的控制
  const handleDisabledDate = current => current && current < moment().subtract(1, 'days');