时间限制----antd

把开始时间和结束时间，设置在时间范围的开始结束里

data.startTime && data.endTime
              ? [moment(data.startTime), moment(data.endTime)]
              : [],

限制时间在当前时间的前七天

  const disabledDate = (current) => {
    return current <moment().subtract(8, 'days') 
  };

限制时间在当前时间之前不可选
  const disabledDate = (current) => {
  return current && current < moment().endOf('day');
  };

选择结束时间和开始时间相差七天---见官网

日期组件，根据开始时间和结束时间选择不同范围

export default class LicenseForm extends Component {
  // 初始化状态
  state = {
   startTime: null,
    endTime: null,
}
...
// 开始时间变化
  getStartValue = (value) => {
    this.setState({ startTime: value });
  };

  // 结束时间变化
  getEndValue = (value) => {
    this.setState({ endTime: value });
  };

  // 开始时间限制
  disabledDateStart = (current) => {
    const { endTime } = this.state;
    if (endTime) {
      // 如果有结束时间
      return current && current > endTime.endOf('day');
    }
  };

  // 结束时间限制
  disabledDateEnd = (current) => {
    const { startTime } = this.state;
    if (startTime) {
      //  如果有开始时间
      const aaa = moment().startOf('day');
      if (startTime < aaa) {
        // 开始时间小于当前时间
        return current && current < moment().startOf('day');
      } else {
        // 开始时间大于当前时间
        return current && current < startTime;
      }
    } else {
      return current && current < moment().startOf('day');
    }
  };
}

render() {
    // 从state中结构获得所需的数据
    const { formRef, submitBtnDisabled, validateRules } = this.state;

    return (
        ...
      <Form.Item label="车牌号有效期">
              <Form.Item
                name="datetimeRangeStart"
                // label="开始时间"
                rules={[{ required: true, message: '此项为必填项' }]}
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
              >
                <DatePicker
                  placeholder="请输入开始时间"
                  disabledDate={this.disabledDateStart}
                  onChange={this.getStartValue}
                />
              </Form.Item>
              <span
                style={{
                  display: 'inline-block',
                  lineHeight: '32px',
                  textAlign: 'center',
                }}
              >
                -
              </span>
              <Form.Item
                name="datetimeRangeEnd"
                // label="结束时间"
                rules={[{ required: true, message: '此项为必填项' }]}
                style={{
                  display: 'inline-block',
                  width: 'calc(50% - 12px)',
                  margin: '0 8px',
                }}
              >
                <DatePicker
                  placeholder="请输入结束时间"
                  disabledDate={this.disabledDateEnd}
                  onChange={this.getEndValue}
                />
              </Form.Item>
            </Form.Item>
            ...
)
}

//less
 :global {
    .ant-card {
      .ant-card-body {
        padding: 24px 25%;

        .ant-form-item {
          display: flex;
          height: 36px;

          .ant-form-item-label {
            width: 100px;

            label {
              justify-content: flex-end;
            }
          }

          .ant-form-item-control {
            flex: 1;
          }
          .ant-picker {
            width: 97%;
          }
        }
      }
    }
  }