如何解决意外的 antd datepicker 行为

Question

我需要在 Ant Datepicker 中禁用选择过去的日期时间。 现在，如果您先选择时间，您可以选择今天（包括过去的日期时间）。但是如果你先选择一天，你就不能选择过去的时间。 Video demo [screencastify]

<DatePicker
  disabledDate={getDisabledDate}
  disabledTime={getDisabledTimes}
  format="Do MMMM yyyy в HH:mm"
  onChange={(moment) => debouncedSetStartDate.run(moment ? moment.toDate() : null)}
  placeholder="Выберите дату и время"
  showNow={false}
  showTime
/>

const getDisabledDate = (date: Moment): boolean => {
  const current = moment().format(dateFormat.dateWithoutTime);
  return date.isSameOrBefore(current);
};

const getDisabledMinutes = (hour: number, currentHour: number, currentMinute: number) => {
  const result: number[] = [];
  if (hour === currentHour) {
    for (let i = 0; i < currentMinute + NEW_TOURNAMENT_START_DELAY_MINUTES; i += 1) {
      result.push(i);
    }
  }
  return result;
};

const getDisabledTimes = (date: null | Moment): DisabledTimes => {
  if (date === null) {
    return {};
  }

  const selected = moment(date.format(dateFormat.dateWithoutTime));
  const current = moment();
  const currentHour = current.hours();
  const currentMinute = current.minutes();
  const isToday = selected.isSame(current.format(dateFormat.dateWithoutTime));
  const hoursToDisable: number[] = [];

  if (isToday) {
    for (let i = 0; i < currentHour; i += 1) {
      hoursToDisable.push(i);
    }
  }

  return {
    disabledHours: () => hoursToDisable,
    disabledMinutes: (hour: number) => (isToday ? getDisabledMinutes(hour, currentHour, currentMinute) : []),
  };
};

Answer 1

如果我理解正确，getDisabledTimes 函数中的问题，if (date === null) 检查。默认情况下，date 参数在第一次打开时为空，您可以查看所有小时和分钟值。

我猜你应该从这个检查中返回一些对象。例如：

const getDisabledTimes = (date: null | Moment): DisabledTimes => {
  if (date === null) {
    // you logic here
    return {
      disabledHours: () => range(0, 24).slice(0, moment().hour()),
      disabledMinutes: () => range(0, 60).slice(0, moment().minutes()),
    };
  }
  // else code
 }