React+Antd中日期时间禁用(RangePicker)

一、 设置禁用日期和时间

// 不可选日期
disabledDate = (current) => {
  return current && current < moment().startOf('day');
  // return current && current < moment().subtract(1, "days");
}
// 不可选时分秒
range = (start, end) => {
  const result = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
};

// 不可选用小时
disabledHours = (date,type) => {
  let hour = moment().hour();
  let disabledHours = [];
  const chosedDate = type == "date" ? moment(date).date() : moment(date[0]).date();
  if (moment().date() == chosedDate) {
    disabledHours = this.range(0, 24).splice(0, hour);
  };
  return disabledHours;
};

// 不可选用分钟
disabledMinutes = (date,type) => {
  let minute = moment().minute();
  let disabledMinutes = [];
  const chosedDate = type == "date" ? moment(date).date() : moment(date[0]).date();
  if (moment().date() == chosedDate) {
    disabledMinutes = this.range(0, 60).splice(0, minute+1);
  };
  return disabledMinutes;
};

// 禁用日期
disabledDateTime = (date) => {
  return {
    disabledHours: () => disabledHours(date,'date'),
    disabledMinutes: () => disabledMinutes(date,'date'),
    disabledSeconds: () => []
  };
}

// 禁用时间
disabledRangeTime = (date, type) => {
  if (type === "start") {
    return {
      disabledHours: () => this.disabledHours(date,'range'),
      disabledMinutes: () => this.disabledMinutes(date,'range'),
      disabledSeconds: () => []
    };
  }
}

二、引用禁用函数

import React, { Component } from 'react';
import { Form,  message, DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;

export default class SetDisabledTime extends Component {
     constructor(props) {
        super(props)
        this.state = {
            startTime: '',
            endTime: ''
        }
    }
    render() {
    	const { startTime, endTime } = this.state;
    	const formItemLayout = {
            labelCol: {
                xs: { span: 3 },
                sm: { span: 3 },
            },
            wrapperCol: {
                xs: { span: 11 },
                sm: { span: 11 },
            },
        };
		return (
			<>
				<Form {...formItemLayout}>
					<Form.Item label="活动时间：" >
	 					{getFieldDecorator("activityTime", {
	   						rules: [{ required: true, message: "请选择时间" }],
	   						initialValue: [moment(startTime), moment(endTime)]
	 					})(
							   <RangePicker
							    disabledDate={this.disabledDate} 
							    disabledTime={this.disabledRangeTime}
							    showTime={{ hideDisabledOptions: true }}
	   							/>
	 					)}
					</Form.Item>
				</Form>
			</>
		)
	}
}