Ant Design - 如何根据日期禁用范围选择器中的特定小时/分钟？

Question

我有一个范围选择器：

<RangePicker
   changeOnBlur={true}
   onChange={horas}
   disabledDate={datasImp}
   disabledTime={horasImp}
   placeholder={["Begin", "End"]}
   showTime={{format:'HH:mm'}} 
   format="DD/MM/YYYY HH:mm"
/>

const horasImp = () => {
   return {
      disabledHours: () => {
         //disabled hours before now
         return [...range(0, 6), ...range(23, 24)]
      }, 
      disabledMinutes: (hour) => {
         //disabled minutes before now
         if(hour == dayjs().hour()){
                    return range(0, dayjs().minute())
         }
         else if(hour == 22){
            return range(31,60)
         }
         else{
            return []
         }
      },
            
   };
}
const datasImp = (current) => {return current && current < dayjs().subtract(1, 'day')}

我的disabledDate和disabledTime运行良好，但我想根据日期禁用特定时间。 或者换句话说 - 我想在禁用分钟/禁用小时时获取当前日期。 我该怎么做？

Answer 1

要根据

disabledMinutes

和

disabledHours

函数中的日期禁用特定时间，您可以在创建

disabledMinutes

对象时将当前日期传递给

disabledHours

和

disabledTime

函数。您可以修改

horasImp

函数以接受当前日期作为参数，并在

disabledMinutes

和

disabledHours

函数中使用它。

以下是如何修改代码的示例：

import { RangePicker } from "antd";
import dayjs from "dayjs";

const MyRangePicker = () => {
  const horasImp = (currentDate) => {
    return {
      disabledHours: () => {
        // disabled hours before now
        return [
          ...Array(
            dayjs(currentDate).isSame(dayjs(), "day") ? dayjs().hour() : 0
          ).keys(),
          ...Array(dayjs().hour() >= 22 ? 0 : dayjs().hour()).keys(),
        ];
      },
      disabledMinutes: (hour) => {
        // disabled minutes before now
        if (hour === dayjs().hour()) {
          return [...Array(dayjs().minute()).keys()];
        } else if (hour === 22) {
          return [
            ...Array(
              dayjs().minute() >= 30 ? 0 : dayjs().minute() + 30
            ).keys(),
          ];
        } else {
          return [];
        }
      },
    };
  };

  const disabledDate = (current) => {
    return current && current < dayjs().subtract(1, "day");
  };

  const handleChange = (dates, dateStrings) => {
    console.log("Selected Time:", dates, "Formatted Time:", dateStrings);
  };

  return (
    <RangePicker
      changeOnBlur={true}
      onChange={handleChange}
      disabledDate={disabledDate}
      disabledTime={horasImp}
      placeholder={["Begin", "End"]}
      showTime={{ format: "HH:mm" }}
      format="DD/MM/YYYY HH:mm"
    />
  );
};

export default MyRangePicker;

在此示例中，

horasImp

函数现在采用 currentDate 参数，该参数是在 RangePicker 中创建

disabledTime

对象时传递的。然后，

disabledHours

和

disabledMinutes

函数使用此

currentDate

根据当前日期做出决策。

此修改应该允许您根据 RangePicker 中的日期禁用特定时间。根据您的具体要求调整

disabledHours

和

disabledMinutes

函数内部的逻辑。