Black Lives Matter. Please consider donating to Black Girls Code today.

DatePickerRange Difficult to Use with Long Ranges

For example, when having a simple DatePickerRange with a ten-year default range.

Let’s say I want to change the starting date from Jan 1, 2010, to Jan 10, 2010:

03%20PM

As you can see the focus shifts correctly to the end date, with a clear blue highlight. But the days shown start from the new start data (Jan 10, 2010).
If I want to make the end date Jan 10, 2020 for example, I would have to click 120 times to move ten years.

I think the default should be that the end date goes to the same month as the default end date.

Also is there a way to quickly move between years?

Shiny for example, has a very easy way to jump between years, decades, centuries, and even millenia!
https://shiny.rstudio.com/gallery/date-and-date-range.html

Thanks!

Yeah, it seems like clicking on the date should bring you to that date (clicking on the start should bring you to the start). I’m not sure if this is an issue with the underlying DatePicker (https://github.com/airbnb/react-dates) or if it’s behaviour that we can configurable in our wrapper of that component (https://github.com/plotly/dash-core-components/blob/master/src/components/DatePickerRange.react.js). If it’s configurable, this would be a great community PR :+1: