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

Posted 2023-03-16

【中文标题】AntD React：在 DateRangePicker 中禁用特定日期的时间范围

【英文标题】：AntD React: Disable time ranges for specific dates in DateRangePicker

【发布时间】：2020-05-29 01:46:48

【问题描述】：

我正在构建一个汽车预订应用程序，我试图根据所选汽车的预订禁用 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。但是文档中没有这样的选项。

我怎样才能做到这一点？

【问题讨论】：

需要自己实现

【参考方案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/

【讨论】：

@thelaw ops，对不起，我忘了分叉

谢谢，但它似乎没有按预期工作......例如 start: "23.02.2020 13:00",end: "25.02.2020 15:00" 应该不可用，但在日历中 23.02.2020 完全禁用，25.03.2020 它完全启用

@thelaw 我也添加了一个小时数的例子