Adding different class names to disabled days in Matcher array

[PrimozRome]

I am using several Matchers to disable dates in my date range picker. Example bellow:

<DayPicker
  mode="range"
  numberOfMonths={2}
  startMonth={new Date()}
  disabled={[
    { 
      before: new Date(),
    },
    {
      after: new Date(2024, 9, 13),
      before: new Date(2024, 9, 19)
     }
  ]}
/>

Is it somehow possible to add custom class name to each matched disabled dates?

For example, by default, the disabled dates will get the following class name class="rdp-day rdp-disabled". I would like to append a custom class name to each matcher, so I can style my disabled dates and achieve like this below:

Any ideas are welcome.

[PrimozRome]

Just to update on my current solution is someone will find it useful.

Currently I am using this CSS selector to match all disabled dates that are in the future.

.rdp-month:has(.rdp-today)~.rdp-month .rdp-week .rdp-disabled

[gpbl]

@PrimozRome not sure I understand your case here - anyway, you can use the modifiers prop and pass some custom modifiers to it. The modifiers will map to the class names.

For example,

const disabled = [
  { 
    before: new Date(),
  },
  {
    after: new Date(2024, 9, 13),
    before: new Date(2024, 9, 19)
   }
];

<DayPicker
  mode="range"
  numberOfMonths={2}
  startMonth={new Date()}
  disabled={disabled}
  modifiers={{
    // Add a modifiers to disabled days.
    myModifier: disabled
  }}
  modifiersClassNames={{
    // Add a custom class name to disabled days.
    myModifier: 'your_custom_class_name'
  }}
/>

See https://daypicker.dev/guides/custom-modifiers

Would that work for you?

[PrimozRome]

My exact use case is that I would like to style disabled dates in the future differently, then disabled dates in the past. So the easiest way would be I could apply a different "disabled" class names to different disabled dates...

To give you an actual use case. I am using the calendar for asset bookings. So for example a car X could already have booked days in the future. So these dates I am disabling and I would like to style them differently. See my image in the original message.

[gpbl]

@PrimozRome than the modifiers prop is what you are looking for:

<DayPicker
  mode="range"
  numberOfMonths={2}
  startMonth={new Date()}
  disabled={disabled}
  modifiers={{
    past: { before: new Date() },
    future: { after: new Date() }
  }}
  modifiersClassNames={{
    past: 'my_past_classname',
    future: 'my_future_classname'
  }}
/>

Then in your CSS:

.rdp-disabled.my_past_classname {
   /* add extra style for disabled+past days cells */
}
.rdp-disabled.my_past_classname .rdp-day_button {
   /* style the button in the cell */
}

.rdp-disabled.my_future_classname {
   /* add extra style for disabled future days */
}
/* etc */

[PrimozRome]

Uff great, that's what I have been looking for! Excellent, thanks for your help!

[PrimozRome]

I have tried this, but the "unavailable" class is not assigned in my date range. Here is the code:

<DayPicker
                    mode="range"
                    numberOfMonths={2}
                    startMonth={new Date()}
                    excludeDisabled={true}
                    disabled={[
                      { 
                        before: new Date(),
                      },
                      {
                        from: new Date(2024, 9, 13),
                        to: new Date(2024, 9, 19)
                      }
                    ]}
                    modifiers={{
                      unavailable: {
                        from: new Date(2024, 9, 13),
                        to: new Date(2024, 9, 19)
                      }
                    }}
                    selected={selectedDates}
                    onSelect={setSelectedDates}
                  />

[PrimozRome]

Ok I made it work, saw in your docs I need to pass modifiersClassNames object to the component. All good. Perfect!!

[gpbl]

Ok I made it work, saw in your docs I need to pass modifiersClassNames object to the component. All good. Perfect!!

Oh you are right I forgot that part 😅 I updated the answer here.

I assume this is not that intuitive. We could add automatically classnames based on the modifiers... without the need of modifiersClassNames.