-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Description
Describe your context
I use dcc.DatePickerRange and max_date_allowed with CSS override of class CalendarDay__blocked_out_of_range to set a background for the dates beyond maximum. This helps our UX well. However, using the calendar to select a new range removes this class for the next date after max_date_allowed.
- replace the result of
pip list | grep dashbelow
dash 3.2.0
-
if frontend related, tell us your Browser, Version and OS
- OS: Windows 11 24H2 26100.6584
- Browser: Chrome
- Version: 140.0.7339.128
Describe the bug
Using dcc.DatePickerRange with max_date_allowed sets css class CalendarDay__blocked_out_of_range for days beyond the max_date_allowed. When clicking on a new start or end date in the calendar, the class is removed for date == max date allowed. Closing the calendar and opening it again repeats the whole behaviour.
Use sample code in main.py:
from datetime import date
from dash import Dash, html, dcc
app = Dash(
assets_folder="./assets"
)
STRFORMAT = "%Y-%m-%d"
app.layout = [
html.Div(
children=[
'Repro',
dcc.DatePickerRange(
start_date=date(2025,9,21).strftime(STRFORMAT),
end_date=date(2025,9,25).strftime(STRFORMAT),
max_date_allowed=date(2025,9,26).strftime(STRFORMAT),
display_format='YYYY-MM-DD',
id="my-date-range-picker",
updatemode="bothdates"
)
]
)
]
if __name__ == '__main__':
app.run(debug=True)Create a folder assets at main.py location and add style.css:
.CalendarDay__blocked_out_of_range {
background-color: rgba(240, 240, 240, 1) !important;
}Expected behavior
CSS Class should still be enforced.
Screenshots
Open the calendar picker and the 27th has the class applied:
Click on a new date and the 27th doesn't have the class applied:
