1、需求
時(shí)間需要限制在當(dāng)前時(shí)間分鐘之前，比如：當(dāng)前時(shí)間是2020年3月31日23:25，那么時(shí)間選擇器可選的時(shí)間是：在2020年3月31日23:25 之前的。

2、思路
因?yàn)槭褂玫氖?antd 的datePicker 組件，該組件提供了兩個(gè)方法來做時(shí)間限制這件事，一個(gè)方法是 disabledDate, 用來限制日期，返回值為 boolean, 另一個(gè)方法是 disabledTime 用來限制顯示的時(shí)間，返回是這樣的：

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

3、實(shí)踐

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;