CODEWITHSUNDEEP
reactjsdatetimepickerantd
thelaw
thelaw

Reputation: 385

AntD React: Disable time ranges for specific dates in DateRangePicker

I am building a car booking application and I am trying to disable some days and times in the DateRangePicker based on selected car's bookings.

I am using AntD React DateRangePicker but I cannot disable specific time ranges for specific dates. If I disable a time range it will be disabled in all days. For example if car A is booked for the periods 23.02.2020 13:00 - 25.02.2020 15:00 and 15.03.2020 08:00 - 20.03.2020 17:00 I want to disable the time ranges 13:00 - 24:00 of 23.02.2020, 00:00 - 15:00 for 25.02.2020, 08:00 - 24:00 of 15.03.2020 and 00:00 - 17:00 of 20.03.2020. But there is no such an option in the documentation.

How can I achieve that?

Upvotes: 4

Views: 3339

Answers (1)

rafaelncarvalho
rafaelncarvalho

Reputation: 729

You have to use the disabledDate props to do this

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)
      )
    );
  }}
/>

Exemple: https://codesandbox.io/s/great-wiles-zedz6

Exemple with hours: https://codesandbox.io/s/frosty-booth-nchl2

You can read more about moment.isBetween here: https://momentjs.com/docs/#/query/is-between/

Upvotes: 2

Related Questions