AntD React: отключить временные диапазоны для указанных c дат в DateRangePicker - PullRequest
Новая
       17

AntD React: отключить временные диапазоны для указанных c дат в DateRangePicker

4 голосов
/ 13 февраля 2020

Я создаю приложение для бронирования автомобиля и пытаюсь отключить несколько дней и раз в DateRangePicker на основе бронирования выбранного автомобиля.

Я использую AntD React DateRangePicker , но не могу отключить указанные c диапазоны времени для указанных c дат. Если я отключу временной диапазон, он будет отключен во все дни. Например, если автомобиль 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 Ответ

2 голосов
/ 13 февраля 2020

Вы должны использовать реквизиты 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 -ween /

...