search

plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.
https://plotly.com/dash
MIT License
21.5k stars 2.07k forks source link

dcc.DatePicker disabled dates formatting #2943

Closed apberesford closed 3 months ago

apberesford commented 3 months ago

dcc.Datepicker components (both single and multi) have limited ways to show which dates are disabled to a user. In general we recommend community libraries like dmc which allow more customization, but for users who are embedding apps dmc components can work in unpredictable ways.

Achieving parity or near-parity in that customization would help a variety of customers who write in to support.

When a developer sets specific dates or date ranges as disabled, the ways in which that is communicated to the end user are limited/unclear. For example if the date is in a larger range and the user wants to shorten the range, they will click on disabled dates and get no response, and the dates look like any other currently selected in the range. Disabled dates should ideally always be visually obvious to a user. Many of our users want a degree of control in communicating that.

dmc date picker components do this out of the box, but dmc components have issues with CSS leakage in cases where clients are embedding apps, meaning they aren't a solution in those cases.

AnnMarieW commented 3 months ago

Hi @apberesford

Have you tried the latest version of dmc? Starting in 0,14 (Mantine 7) shouldn't have the CSS issue you mentioned.

For the dcc datepickers, it looks like the disabled dates have a class name of CalendarDay__blocked_out_of_range. This seems to work:


.CalendarDay__blocked_out_of_range {
   color: red
}

image

apberesford commented 3 months ago

Hi AnnMarie, ClassName is an excellent way of handling this, thanks! Closing.