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 dash below
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:

Describe your context
I use
dcc.DatePickerRangeandmax_date_allowedwith CSS override of classCalendarDay__blocked_out_of_rangeto 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 aftermax_date_allowed.pip list | grep dashbelowif frontend related, tell us your Browser, Version and OS
Describe the bug
Using dcc.DatePickerRange with
max_date_allowedsets css classCalendarDay__blocked_out_of_rangefor days beyond themax_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:Create a folder
assetsatmain.pylocation and addstyle.css: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: