How to differentiate outside table cell and date table cell?

[BhoomikaSorathiya]

Bug description

In react-day-picker v7, there was DayPicker-Day--outside class for outside non-date div. But, for react-day-picker v8, there is no class provided to differentiate between date vs outside date .

Basically, I want to provide border to only which has date text. I am trying to do it with :has() css selector, but it doesn't support Firefox browser. So looking for alternative like classname with --outside. Can anyone please help?

To reproduce

Go to here for v8 & here for v7 and inspect element to see class names.

Expected behavior

There should be som class like rdp-cell--outside for outside table cell to differentiate with date cell.

Screenshots

react-day-picker v7 DayPicker-Day--outside class:

react-day-picker v8 rdp-cell class for outside table cell without any difference from date table cell:

[gpbl]

@BhoomikaSorathiya use the showOutsideDays prop to show the outside days. There you would see in the DevTool the CSS class is .rdp-day_outside.

Basically, I want to provide border to only which has date text. I am trying to do it with :has() css selector

You can use

.rdp-day:not(.rdp-day_outside) {
  border: 1px solid currentColor;
}

https://codesandbox.io/s/strange-brown-8jr294?file=/styles.css:533-601

[BhoomikaSorathiya]

Thanks @gpbl for quick reply. showOutsideDays shows dates which are outside. For my case, I don't want to show outside days and it's border.

Currently it's look like this, as I have provided border to all rdp-cell. I want to remove border from rdp-cell for outside.

Current:

Expected:

[gpbl]

@BhoomikaSorathiya thanks for your clarification! (and sorry for the misunderstanding)

You are right – currently is not possible to get a design like yours, as we are missing an rd-cell_outside class here:

https://github.com/gpbl/react-day-picker/blob/main/src/components/Row/Row.tsx#L41-L48

I will work on a fix: #1856

[BhoomikaSorathiya]

Sounds good. Thanks @gpbl for working on this issue!

[gpbl]

The fix for this is included in the next major version currently in beta.