gpbl / react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.

Home Page:https://daypicker.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to differentiate outside table cell and date table cell?

BhoomikaSorathiya opened this issue · comments

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:

Screenshot 2023-07-27 at 6 51 10 PM

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

Screenshot 2023-07-27 at 6 50 44 PM