React + Ant Design V4.0 DatePicker 不可选择的日期和时间设置

最新推荐文章于 2025-10-01 00:32:24 发布

原创最新推荐文章于 2025-10-01 00:32:24 发布 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #react #es6 #typescript

在React应用中，利用Ant Design V4的DatePicker组件，通过配置`disabledDate`和`disabledTime`属性，可以实现只允许用户选择当前及之后的日期和时间，阻止选择过去的日期和时间点。具体实现代码和详细注释说明了如何设置这些属性来达到需求。

需求：选择日期时，只能选择当天及之后的日期，之前的日期不可选；选择时间时，只能选择当日当前及之后的时间点；

例子：如果当前时间时 2021年01月10日 08:08:08，那么 DatePicker 组件可选的日期和时间范围只能是 2021年01月10日 08:08:08 之后的日期和时间，如：2021年01月10日 08:09:00

解决方案：因为使用的是 Ant Design V4.0 版本组件库，该 DatePicker 组件有两个属性：disabledDate 和 disableTime ，分别用来控制不可选日期和不可选时间，disabledTime 需要和 showTime 一起使用；详见代码和注释内容：

不可选择日期：

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

const DatePicker = () => {
  const disabledDate = current => {
    // Can not select days before today and today
    // return current && current < moment().endOf('day');

    // Can not select days before today
    // return current && current < moment().subtract(1, 'days');
    return current && moment(current).isBefore(moment(), 'day');
  }

  return (
    <DatePicker
      format="YYYY/MM/DD HH:mm:ss"
      showTime
      disabledDate={disabledDate}
      placeholder="Please Select Date"
      className="date-picker"
    />
  );
};

export default DatePicker;

不可选时间限制：

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

const DatePicker = () => {
  const range = (start, end) => {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  }

  const disabledDate = current => {
    return current && moment(current).isBefore(moment(), 'day');
  }
  
  const disabledTime = current => {
    const hours = moment().hours()
    const minutes = moment().minutes()
    // const seconds = moment().seconds()
    const currentHour = moment(current).hour();
    if (current && moment(current).date() === moment().date()) {
      return {
        disabledHours: () => this.range(0, 24).splice(0, hours),
        disabledMinutes: () => {
          if (currentHour === moment().hour()) {
            return this.range(0, 60).splice(0, minutes);
          }
          return [];
        },
        // 秒的限制没什么意义，这里的逻辑也存在问题，解决思路如分钟的限制
        // disabledSeconds: () => this.range(0, 60).splice(0, seconds + 1),
      }
    }
    return {
      disabledHours: () => [],
      disabledMinutes: () => [],
      // disabledSeconds: () => [],
    }
  }

  return (
    <DatePicker
      format="YYYY/MM/DD HH:mm:ss"
      showTime
      disabledDate={disabledDate}
      disabledTime={disabledTime}
      placeholder="Please Select Date and Time"
      className="date-picker"
    />
  );
};

export default DatePicker;