react-day-picker
react-day-picker copied to clipboard
gpbl
Add modifiers classes to cell elements
Discussed in https://github.com/gpbl/react-day-picker/discussions/1855
Originally posted by BhoomikaSorathiya July 27, 2023
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
: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:
was just looking for this! would really like this, the new nested .rdp-cell > .rdp-day DOM structure makes it difficult to do any sibling selectors where you want to select the previous sibling
use case, trying to get a faded highlighted range like in airbnb
.rdp-cell:not(:has(.rdp-day_outside)) + .rdp-cell:has(.rdp-day_highlighted.rdp-day_outside) {
::before {
background: transparent;
background-image: linear-gradient(to right, ${color("bgBorder")}, transparent);
}
}
.rdp-cell:has(.rdp-day_highlighted.rdp-day_outside):has(+ .rdp-cell:has(.rdp-day_outside)) {
::before {
background: transparent;
background-image: linear-gradient(to left, ${color("bgBorder")}, transparent);
}
}
the 2nd rule does not work, even in chrome, because you cannot nest :has selectors
@tarngerine @BhoomikaSorathiya to fix this issue you will need to upgrade to v9 http://react-day-picker.js.org/next (in beta at the moment).
Awesome. Thank you! On May 28, 2024 at 1:43 PM -0500, Giampaolo Bellavite @.***>, wrote:
@tarngerine @BhoomikaSorathiya to fix this issue you will need to upgrade to v9 http://react-day-picker.js.org/next (in beta at the moment). — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>