在Antd日期选择器中禁用特定日期的时间,可以使用disabledTime
属性来实现。下面是一个示例代码:
import React from 'react';
import { DatePicker } from 'antd';
const disabledDateTime = () => {
// 禁用时间范围:上午9点到下午6点
const disabledHours = () => {
const hours = [];
for (let i = 0; i < 24; i++) {
if (i < 9 || i > 18) {
hours.push(i);
}
}
return hours;
};
const disabledMinutes = () => {
return [0, 15, 30, 45];
};
const disabledSeconds = () => {
return [0];
};
return {
disabledHours,
disabledMinutes,
disabledSeconds,
};
};
const App = () => {
return (
);
};
export default App;
在上面的示例中,我们定义了一个名为disabledDateTime
的函数,该函数返回一个对象,其中包含三个属性:disabledHours
、disabledMinutes
和disabledSeconds
。这些属性分别返回要禁用的小时、分钟和秒钟的数组。
在disabledHours
函数中,我们循环遍历24小时,并将不在9点到18点之间的小时添加到禁用数组中。
在disabledMinutes
函数中,我们返回一个包含0、15、30和45的数组,这样用户只能选择这些分钟。
在disabledSeconds
函数中,我们只返回一个包含0的数组,这样用户只能选择0秒。
最后,在DatePicker组件中,我们传入了showTime
属性来显示时间选择器,以及disabledTime
属性来指定禁用的时间范围为disabledDateTime
函数返回的对象。
通过上述代码,你可以禁用Antd日期选择器中的特定日期的时间。