在使用 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。此外,代码中的逻辑是为了演示目的而编写的,在实际应用中可能需要调整逻辑以满足具体需求。