DatePickerRange: visible month based on what was clicked (start date / end date)

Greetings everybody,

I’m building an application which allows the user to select a fairly large time interval. That is currently implemented as a dcc.DatePickerRange with defined start_date and end_date attributes. For the purposes of this discussion, assume start_date = 2015-01-01 and end_date = 2020-01-01.

Expected behavior: when the user clicks on the left-hand side of the control (specifying the start date), the month corresponding to the start date is shown. When the user clicks on the right-hand side of the control (specifying the end date), the month corresponding to the end date is shown.

Current behavior: if initial_visible_month property of DatePickerRange is not set, the month being opened in the dropdown defaults to the month of the start date, even when the user clicks on the end date. If initial_visible_month is set, that value is being used both when clicking on start and end dates.

Is there a way around this, or do I have to use two different inputs? It’s really not feasible to ask the user to click through dozens of months. Yes, you can edit the value of DatePickerRange directly (ignoring the dropdown calendar), however that does not seem to provide a very fluid UX.

Thanks in advance!

hi Did you solve it?

up, how to solve this problem?

@kilobit you can give dash-mantine-components a try. Its DatePicker/DateRangePicker lets you easily switch between different years and months. DateRangePicker

2 Likes