Enable specific days

[DeividZavala]

Hello, I need help to solve this problem.

I am trying to limit the dates that can be selected by a matcher in the disabled prop of the component, I have a date array of type string (example. ["2022-11-05T06:00:00:00.000Z"]) which I am traversing and I want that if the date that receives the matcher does not appear in the array then it is disabled.

My logic is as follows:

        disabled={date => {
          // I'm using toLocaleString method to ensure that I'm comparing the same thing
          return dates.some((d) => new Date(d).toLocaleString() !== date.toLocaleString())
        }}

The result of this is that the component disabled everything, including the dates on the array.

I tried changing the operator to the not equal (!==) to see its behavior and it works but in the opposite way, disables the dates on the array and keeps enabling the others

Any suggestion?

Thanks for the help

EXAMPLE:

https://codesandbox.io/s/vigorous-julien-7fr3zf?file=/src/App.js

[gpbl]

@DeividZavala you can pass the array directly to disabled:

<DayPicker disabled={dates} />

https://codesandbox.io/s/dark-cdn-8w1w4q?file=/src/App.js

Anyway, your diff based on toLocaleString doesn't work – use isSameDay from date-ins:

import { isSameDay } from "date-fns";

export default function App() {
  const dates = ["2022-11-05T06:00:00.000Z", "2022-11-06T06:00:00.000Z"];
  return (
    <DayPicker
      disabled={(date) => dates.some((d) => isSameDay(d, date))}
    />
  );
}

[DeividZavala]

Thanks for the suggestion.

For sure this is a better approach, I just found the error, a stupid one jajaja

disabled={
(date) => !dates.some((d) => isSameDay(new Date(d), date))
}

Using your approach, I had to deny the result of the some operation and it worked, Thanks man.

Example:
https://codesandbox.io/s/vigorous-julien-7fr3zf?file=/src/App.js