antd datePicker 限制可选时间

1、需求
时间需要限制在当前时间分钟之前，比如：当前时间是2020年3月31日23:25，那么时间选择器可选的时间是：在2020年3月31日23:25 之前的。

2、思路
因为使用的是 antd 的datePicker 组件，该组件提供了两个方法来做时间限制这件事，一个方法是 disabledDate, 用来限制日期，返回值为 boolean, 另一个方法是 disabledTime 用来限制显示的时间，返回是这样的：

const disabledTime = () => {
  return {
    disabledHours: () => {} // 返回 需要disabled 的hours
    disabledMinutes: () => {} // 返回 需要disabled 的 minutes
  }
}

3、实践

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less';

const { RangePicker } = DatePicker;

const DateRangePicker = ({ onChange }) => {
  const disabledHours = () => {
    const hours = [];
    for (let i = 23; i > moment().hour(); i--) {
      hours.push(i);
    }
    return hours;
  };

  const disabledMinutes = currentDate => {
    const currentMinute = moment().minute();
    const currentHour = moment(currentDate).hour();
    const minutes = [];
    if (currentHour === moment().hour()) {
      for (let i = 59; i > currentMinute; i--) {
        minutes.push(i);
      }
    }
    return minutes;
  };

  const disabledTime = (dateTime) => {
    if (moment(dateTime).isBefore(moment(), 'day')) {
      return {
        disabledHours: () => [],
        disabledMinutes: () => [],
      };
    }

    if (moment(dateTime).isSame(moment(), 'day')) {
      return {
        disabledHours: () => disabledHours(dateTime),
        disabledMinutes: () => disabledMinutes(dateTime),
      };
    }
  };

  return (
    <RangePicker
      format="YYYY/MM/DD HH:mm"
      showTime
      onChange={onChange}
      disabledDate={(selectedDate) => moment(selectedDate).isAfter(moment(), 'day')}
      disabledTime={disabledTime}
      placeholder=""
      className="date-picker"
    />
  );
};

export default DateRangePicker;