AntD React：禁用DateRangePicker中特定日期的时间范围

Question

我正在构建汽车预订应用程序，并且我试图根据所选汽车的预订在DateRangePicker中禁用某些日期和时间。

我正在使用AntD React DateRangePicker，但无法在特定日期禁用特定时间范围。如果我禁用了时间范围，则将全天都禁用它。例如，如果预订汽车A的期间为23.02.2020 13:00 - 25.02.2020 15:00和15.03.2020 08:00 - 20.03.2020 17:00，则我想禁用时间范围13:00 - 24:00 of 23.02.2020，00:00 - 15:00 for 25.02.2020，08:00 - 24:00 of 15.03.2020和00:00 - 17:00 of 20.03.2020。但是文档中没有这样的选项。

我该如何实现？

Answer 1

您必须使用disabledDate道具来执行此操作

const format = "DD.MM.YYYY HH:mm";
const disabledDates = [
  {
    start: "23.02.2020 13:00",
    end: "25.02.2020 15:00"
  },
  {
    start: "15.03.2020 08:00",
    end: "20.03.2020 17:00"
  }
];

<RangePicker
  onChange={onChange}
  defaultValue={[moment(), moment()]}
  showTime
  disabledDate={current => {
    console.log(current);
    return disabledDates.some(date =>
      current.isBetween(
        moment(date["start"], format),
        moment(date["end"], format)
      )
    );
  }}
/>

示例：https://codesandbox.io/s/great-wiles-zedz6

例有小时：https://codesandbox.io/s/frosty-booth-nchl2

您可以在此处阅读有关moment.isBetween的更多信息：https://momentjs.com/docs/#/query/is-between/