如何在 Antd DateTimepicker 中禁用过去的时间？

Question

我有一个自定义的 Antd DateTime 选择器组件，如下所示：

import React from 'react';
import { DatePicker } from 'antd';
import { throttle } from 'lodash';
import moment from 'moment';

class FDateTime extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ...props,
      collection_id: props.is_collection ? props.collection_id : undefined,
    };

    this.updateParent = throttle(props.onChange, 1000);
  }

  onChange = (date, dateString) => {
    this.setState(
      {
        value: dateString,
      },
      () => {
        this.updateParent(
          this.state.form_config.entity_key,
          this.state.value,
          this.state.is_collection,
          this.state.collection_key,
          this.state.collection_id,
        );
      },
    );
  };

  /**
   * in_the_past : only past date
   * not_in_the_past: present and future
   * in_the_future: only future
   * not_in_the_future: present and past
   * @param {*} restriction
   * @param {*} current
   */
  disabledDate = (restriction, current) => {
    if (restriction) {
      return {
        in_the_past: () => {
          return current > Date.now();
        },
        in_the_future: () => {
          return moment().add(-1, 'days') >= current;
        },
        not_in_the_past: () => {
          return moment().add(-1, 'days') >= current;
        },
        not_in_the_future: () => {
          return current >= Date.now();
        },
      }[restriction]();
    }
  };

  disabledDateTime = restriction => {
    if (restriction) {
      function range(start, end) {
        const result = [];
        for (let i = start; i < end; i++) {
          result.push(i);
        }
        return result;
      }
      return {
        in_the_future: () => {
          let timeNow = moment().format('HH:mm:ss');
          let hours = range(0, 24);
          let minutes = range(0, 60);
          let seconds = range(0, 60);
          return {
            disabledHours: () => hours.splice(0, hours.indexOf(parseInt(timeNow.split(':')[0]))),
            disabledMinutes: () =>
              minutes.splice(0, minutes.indexOf(parseInt(timeNow.split(':')[1]))),
            disabledSeconds: () =>
              seconds.splice(0, seconds.indexOf(parseInt(timeNow.split(':')[2]))),
          };
        },
      }[restriction]();
    }
  };

  render() {
    return (
      <DatePicker
        value={this.state.value ? moment(this.state.value) : undefined}
        style={{ width: '100%' }}
        showTime={{
          hideDisabledOptions: true,
        }}
        onChange={this.onChange}
        disabledDate={current =>
          this.disabledDate(
            this.state.form_config.options && this.state.form_config.options.restriction,
            current,
          )
        }
        disabledTime={() =>
          this.disabledDateTime(
            this.state.form_config.options && this.state.form_config.options.restriction,
          )
        }
      />
    );
  }
}

export default FDateTime;

这里disabledDateTime()正在为禁用时间返回正确的配置，但是，组件没有禁用这些值！ 这个 function 接受一个参数restriction ，它告诉 function 要禁用哪个范围，并基于该配置返回。 这已经在disabledDate() function 的情况下进行了测试。 但是如果有时间该组件由于某种原因没有正确禁用它。

Answer 1

我有一个自定义的 Antd DateTime 选择器组件，如下所示：

import React from 'react';
import { DatePicker } from 'antd';
import { throttle } from 'lodash';
import moment from 'moment';

class FDateTime extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ...props,
      collection_id: props.is_collection ? props.collection_id : undefined,
    };

    this.updateParent = throttle(props.onChange, 1000);
  }

  onChange = (date, dateString) => {
    this.setState(
      {
        value: dateString,
      },
      () => {
        this.updateParent(
          this.state.form_config.entity_key,
          this.state.value,
          this.state.is_collection,
          this.state.collection_key,
          this.state.collection_id,
        );
      },
    );
  };

  /**
   * in_the_past : only past date
   * not_in_the_past: present and future
   * in_the_future: only future
   * not_in_the_future: present and past
   * @param {*} restriction
   * @param {*} current
   */
  disabledDate = (restriction, current) => {
    if (restriction) {
      return {
        in_the_past: () => {
          return current > Date.now();
        },
        in_the_future: () => {
          return moment().add(-1, 'days') >= current;
        },
        not_in_the_past: () => {
          return moment().add(-1, 'days') >= current;
        },
        not_in_the_future: () => {
          return current >= Date.now();
        },
      }[restriction]();
    }
  };

  disabledDateTime = restriction => {
    if (restriction) {
      function range(start, end) {
        const result = [];
        for (let i = start; i < end; i++) {
          result.push(i);
        }
        return result;
      }
      return {
        in_the_future: () => {
          let timeNow = moment().format('HH:mm:ss');
          let hours = range(0, 24);
          let minutes = range(0, 60);
          let seconds = range(0, 60);
          return {
            disabledHours: () => hours.splice(0, hours.indexOf(parseInt(timeNow.split(':')[0]))),
            disabledMinutes: () =>
              minutes.splice(0, minutes.indexOf(parseInt(timeNow.split(':')[1]))),
            disabledSeconds: () =>
              seconds.splice(0, seconds.indexOf(parseInt(timeNow.split(':')[2]))),
          };
        },
      }[restriction]();
    }
  };

  render() {
    return (
      <DatePicker
        value={this.state.value ? moment(this.state.value) : undefined}
        style={{ width: '100%' }}
        showTime={{
          hideDisabledOptions: true,
        }}
        onChange={this.onChange}
        disabledDate={current =>
          this.disabledDate(
            this.state.form_config.options && this.state.form_config.options.restriction,
            current,
          )
        }
        disabledTime={() =>
          this.disabledDateTime(
            this.state.form_config.options && this.state.form_config.options.restriction,
          )
        }
      />
    );
  }
}

export default FDateTime;

这里disabledDateTime()正在为禁用时间返回正确的配置，但是，组件没有禁用这些值！ 这个 function 接受一个参数restriction ，它告诉 function 要禁用哪个范围，并基于该配置返回。 这已经在disabledDate() function 的情况下进行了测试。 但是如果有时间该组件由于某种原因没有正确禁用它。