antd datepicker禁用日期设置为今天的前一天,禁用时间设置为当前时间点之前的时间

        在使用 Ant Design (antd) 的 DatePicker 组件时,可以通过 disabledDate 和 showTime 的 disabledHours, disabledMinutes, disabledSeconds 属性来禁用特定的日期和时间。

        1. 禁用今天的前一天及之前的日期:
        可以提供一个函数给 disabledDate 属性,该函数将接收一个 current 参数(一个 moment.js 对象),然后返回一个布尔值来表明这个日期是否应该被禁用。为了禁用今天的前一天及之前的所有日期,需要比较 current 和今天的日期。
        2. 禁用当前时间点之前的时间:
        如果使用了 showTime,那么可以利用 disabledHours, disabledMinutes, 和 disabledSeconds 来禁用之前的时间。需要根据当前时间动态地设置这些属性。

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

const { RangePicker } = DatePicker;

class App extends React.Component {
  disabledDate = (current) => {
    // Can not select days before today and today's previous day
    return current && current < moment().subtract(1, 'days');
  }

  disabledDateTime = () => {
    return {
      disabledHours: () => this.getDisabledHours(),
      disabledMinutes: (hour) => this.getDisabledMinutes(hour),
      disabledSeconds: (hour, minute) => this.getDisabledSeconds(hour, minute),
    };
  }

  getDisabledHours = () => {
    const now = moment();
    if (now.hour() === 0) {
      return Array.from({ length: 24 }, (_, i) => i);
    }
    return Array.from({ length: now.hour() }, (_, i) => i);
  }

  getDisabledMinutes = (hour) => {
    const now = moment();
    if (now.hour() === hour && now.minute() === 0) {
      return Array.from({ length: 60 }, (_, i) => i);
    }
    if (now.hour() === hour) {
      return Array.from({ length: now.minute() }, (_, i) => i);
    }
    return [];
  }

  getDisabledSeconds = (hour, minute) => {
    const now = moment();
    if (now.hour() === hour && now.minute() === minute) {
      return Array.from({ length: now.second() }, (_, i) => i);
    }
    return [];
  }

  render() {
    return (
      <DatePicker
        showTime
        disabledDate={this.disabledDate}
        disabledTime={this.disabledDateTime}
      />
    );
  }
}

export default App;

        请注意,这段代码假设已经安装并配置好了 antd 和 moment.js。如果使用的是最新的 antd 版本,它可能内置支持 ES6 Date 对象,因此可能不需要使用 moment.js。此外,代码中的逻辑是为了演示目的而编写的,在实际应用中可能需要调整逻辑以满足具体需求。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值