Disable date-time range in React-Datepicker

Question

I have an array of events in which we have objects containing the start and end date of the event.

[
  {
    "start": "2020-10-07T15:30:00+05:00",
    "end": "2020-10-07T16:30:00+05:00"
  },
  {
    "start": "2020-10-11T16:00:00+05:00",
    "end": "2020-10-11T20:00:00+05:00"
  }
]

I want to disable the range in which an event is occurring in the react-datepicker. So that user cannot select the date or time on which an event is already booked.

Answer 1

You can exclude dates and/or times using these two props: excludeDates and excludeTimes.

Documentation here presents how to do it under "Exclude dates" and "Exclude times" sections. https://reactdatepicker.com/

Answer 2

import moment from "moment"
import {extendMoment} from "moment-range"

Let's name the data of dates range as bookings

let bookedDates = [];
bookings.forEach((booking) => {
  const range = moment.range(moment(booking.start), moment(booking.end));
  //The Array.from() static method creates a new, shallow-copied Array instance from an array-like or iterable object.
  const dates = Array.from(range.by("day"));
  // The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
  bookedDates.concat(dates);
});

this code must be returned from server to client. In the client, you get the bookedDates array. On client side you should convert each date to Date object for React date picker

const excludedDates = [];
  dates.forEach((date) => {
    excludedDates.push(new Date(date));
  });

Now add this to Datepicker:

    <DatePicker
            ....

            // if you want to both checkIn and checkOut date
            selectsRange
            excludeDates={excludedDates}
          />

Answer 3

If you want to disable only date range then you can use excludeDateIntervals props.



But if you want to disable time also then check this.



Firstly, make an array of the slots which you want to be disabled like this.

let slots = [
{ start: new Date(2022, 8, 8, 13), end: new Date(2022, 8, 8, 14) },
{ start: new Date(2022, 8, 8, 15), end: new Date(2022, 8, 8, 17) },
{ start: new Date(2022, 7, 18, 12), end: new Date(2022, 7, 18, 18) },
{ start: new Date(2022, 8, 1, 9), end: new Date(2022, 8, 2, 13) },
]

You can define a object in any proper format or using Date function like this


// { start: "08/09/2022 13:00", end: "08/09/2022 14:00" }
// OR
// { start: new Date(2022, 8, 8, 3), end: new Date(2022, 8, 8, 5) }

Now use filterTime prop of react-datepicker

filterTime={(time) => {
                  for (let i = 0; i < slots.length; i++) {
                    const e = slots[i];

                    var x = moment(time),
                      beforeTime = moment(e.start),
                      afterTime = moment(e.end);

                    if (
                      x.isBetween(beforeTime, afterTime) ||
                      x.isSame(moment(beforeTime)) ||
                      x.isSame(moment(afterTime))
                    ) {
                      return false;
                    }
                    if (i + 1 == slots.length) {
                      return true;
                    }
                  }
                }}

Answer 4

As @Muhiq said, the excludeDateIntervals attribute can be used for this. It accepts an array of objects, each containing a start and end values which should be a regular JavaScript Date. Using the data from your example:

const events = [
    {
        "start": "2020-10-07T15:30:00+05:00",
        "end": "2020-10-07T16:30:00+05:00"
    },
    {
        "start": "2020-10-11T16:00:00+05:00",
        "end": "2020-10-11T20:00:00+05:00"
    }
];

const disabledDateRanges = events.map(range => ({
    start: new Date(range.start),
    end: new Date(range.end)
}));

<DatePicker excludeDateIntervals={disabledDateRanges} />

No need to import libraries/manually generate date ranges.