How to differentiate outside table cell and date table cell? #1855
Replies: 3 comments 2 replies
-
@BhoomikaSorathiya use the
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 |
Beta Was this translation helpful? Give feedback.
-
@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 https://github.com/gpbl/react-day-picker/blob/main/src/components/Row/Row.tsx#L41-L48 I will work on a fix: #1856 |
Beta Was this translation helpful? Give feedback.
-
The fix for this is included in the next major version currently in beta. |
Beta Was this translation helpful? Give feedback.
-
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:Beta Was this translation helpful? Give feedback.
All reactions