DatePicker with just Month and Year

Hello there,

Is there any chance to see an update of the dcc.DatePicker, so that we could use it to select only a month and a year? In term of UI on mobile, this would help.

I’ve Monthly data; I currently use a Range Slider with 65 values. On mobile phone, it’s almost unreadable. Unless you have small fingers, it’s actually unusable.

It it was possible to chose a period just picking: “Jan 2016”-“Jun 2019”
for “from 01-Jan-2016 to 30-Jun-2019”, I think it would make the UI lighter.

will using 2 drop downs work? one for year and one for month

Yes it would, but this solution is not really esthetic. And it requires 1 click on the dropdown, then 1 click on the item,that’s 8 clicks, when you are using a smartphone, it’s not that convenient :confused:

There could be a way to circumvent the above issue, displaying the value of my dcc.RangeSlider in a div. This way, I could totally remove every label.

Result would be something like:

This way, everytime the RangeSlider updates its value, the Div is refreshed with the current value “below the pointer/finger”.

Problem is: I have to set updatemode=“drag” in my dcc.RangeSlider, and, since all my figures depend on this very same RangeSlider, they all are “continuously updated” too, which is demanding -and useless- in terms of resources.

Simultaneously, I observe that when we move the handles along the rangeSlider, the labels turn grey when they are out of the picked range. And this happends continuously, whatever the updatemode is.

If there was a way to “listen” the css property of these labels, it would be possible to infer what is the picked range, continuously, while the figures would only be refreshed at the end, keeping updatemode set to “mouseup”.

But how to do this? Javascript? What would be your first thoughts, @chriddyp ?