disabledTime禁用时间

ant-design的RangePicker组件disabledTime属性

如果你有一个ant的时间范围选择的组件，你的时间选择会依赖其他的时间去控制它的可选择范围，那么以下代码或许对你有帮助

export type TimeType = "start" | "end";
export type DirectionType = "before" | "after";
export type RangeType = Array<{
  time: Dayjs | undefined;
  direction: DirectionType;
}>;

export interface ConfigType {
  start?: {
    startTime: Dayjs;
    isTodayAfter?: boolean;
    range?: RangeType;
  };
  end?: {
    range?: RangeType;
  };
}

function getRange(start: number, end: number) {
  const result = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
}

const SELF_CAN_SELECT = 1;

function disableRange(range: any[], date: Dayjs) {
  let hours: number[] = [];
  let minutes: number[] = [];

  range?.forEach((item) => {
    const { time, direction } = item;
    const isSameDay = time.isSame(date, "day");

    if (isSameDay && dayjs.isDayjs(time)) {
      if (direction === "before") {
        hours = [...hours, ...getRange(time.hour() + SELF_CAN_SELECT, 24)];

        if (time.hour() === date.hour()) {
          minutes = [...minutes, ...getRange(time.minute(), 60)];
        }
      }

      if (direction === "after") {
        hours = [...hours, ...getRange(0, time.hour() - SELF_CAN_SELECT)];

        if (time.hour() === date.hour()) {
          minutes = [...minutes, ...getRange(0, time.minute())];
        }
      }
    }
  });

  return [hours, minutes];
}

export function disableHM(
  date: Dayjs,
  type: TimeType,
  config: ConfigType
): any{
  const today = dayjs();
  const isToday = today.isSame(date, "day");
  const { start: startConfig, end: endConfig } = config;
  let hours: number[] = [];
  let minutes: number[] = [];

  if (dayjs.isDayjs(date)) {
    if (type === "start") {
      const { isTodayAfter, range = [] } = startConfig ?? {};

      // isTodayAfter:如果选的是今天，则禁用今天之后的时、分
      if (isTodayAfter && isToday) {
        hours = getRange(0, today.hour() - SELF_CAN_SELECT);

        if (today.hour() === date.hour()) {
          minutes = getRange(0, today.minute() - SELF_CAN_SELECT);
        }
      }

      const [rangeHours, rangeMinutes] = disableRange(range, date);

      return {
        disabledHours: () => [...hours, ...rangeHours],
        disabledMinutes: () => [...minutes, ...rangeMinutes],
      };
    }

    if (type === "end") {
      const { startTime } = startConfig ?? {};
      const { range = [] } = endConfig ?? {};

      const isSameStartDay = startTime?.isSame(date, "day");

      // 结束时间一定是大于开始时间的
      if (isSameStartDay && startTime) {
        hours = getRange(0, startTime.hour() - SELF_CAN_SELECT);
        if (date.hour() === startTime.hour()) {
          minutes = getRange(0, startTime.minute() - SELF_CAN_SELECT);
        }
      }

      const [rangeHours, rangeMinutes] = disableRange(range, date);

      return {
        disabledHours: () => [...hours, ...rangeHours],
        disabledMinutes: () => [...minutes, ...rangeMinutes],
      };
    }
  }

  if (!date) {
    return {
      disabledHours: () => getRange(0, 23),
      disabledMinutes: () => getRange(0, 59),
    };
  }

  return {
    disabledHours: () => [],
    disabledMinutes: () => [],
  };
}

你可以通过onCalendarChange属性获取开始时间

     onCalendarChange={(date) => { setStart(date) }}

使用

通过配置config的做法控制时间的禁用

const disabledDateTime = (
    date: Dayjs,
    type: TimeType
  ): RangePickerProps["disabledTime"] => {
    const [activeStartTime] = activeTime ?? [];
    const [signStartTime] = signInTime ?? [];
    const config: ConfigType = {
      start: {
        startTime: signStartTime,
        isTodayAfter: true,
        range: [
          {
            time: activeStartTime,
            direction: "before",
          },
        ],
      },
      end: {
        range: [
          {
            time: signStartTime,
            direction: "after",
          },
          {
            time: activeStartTime,
            direction: "before",
          },
        ],
      },
    };

    return disableHM(date, type, config);
  }
  }

存在的问题：
选中日期后，确定按钮就被激活了，此时还没选择时分，默认是当前时间的时分。