DatePickerRange - picker synchronisation with end_date

Dash Python
1

I have a date picker range like so:

dcc.DatePickerRange(
                        id="date-range",
                        month_format="DD-MMM-YYYY",
                        display_format="DD-MMM-YYYY",
                        min_date_allowed=data.Date.min().date(),
                        max_date_allowed=data.Date.max().date(),
                        start_date=data.Date.min().date(),
                        end_date=data.Date.max().date()
                    )

I cannot see (from the documentation or a search in the forum) how to make it so that the date picker pop-up opens with the correct month and year for an existing value of the end date, when the end date has focus. This must surely be possible as always loading with the start date is a usability nuisance.
To be clear:

  • Action = click in the end_date box
  • Observed = picker pops-up with the start_date in view
  • Expected = picker pops-up with the end_date in view (could be years in advance of the start date and it is nuts to cycle through all the months(

Could someone put me straight?

(btw, in other respects, the control works fine; callback is updating two plots)
Thanks in advance, Adam

2

Hello @AdamC,

Welcome to the community!

It looks like you are trying to set a default value, is this correct?

If so, try passing:

value=[data.Data.min().date(), data.Date.max().date()]
3

Setting defaults in the textual boxes is fine.
The issue is that the calendar (month) popup date-picker does not load with the month which corresponds with the value in the end_date text box.

Imagine that the user has picked a 3 month window within the middle of a 10 year dataset and then wishes to extend the window by 1 month; selecting the end-date box should bring the end date of the existing window up in the picker, so it can just be advanced by 1 month.

Adam

1 Like
4

Hello @AdamC,

I dont think that this is possible with a date range picker, the picker assumes that you are going to update the whole range, thus it starts at the beginning of your selection.

However, you can easily accomplish this with two date pickers, a start date and an end date.

5

Another option is to use the DateRangePicker from the dash-mantine-components library. I don’t think you can select and update just the end date there either, but it is easier to skip by month and year.

1 Like
6

@AnnMarieW,

I checked that one as if there were any that it was available, it was that one. :smiley:

It does not… :frowning:

7

Thanks for confirming that this is a limitation of the control, rather than my use of it, and for the suggestions.
Cheers, Adam

1 Like