dcc.DatePickerRange component: calendar does not show the current date

[rmmariano]

Describe your context

Please provide us your environment so we can easily reproduce the issue.

dash                 1.10.0 
dash-core-components 1.9.0  
dash-html-components 1.0.3  
dash-renderer        1.3.0  
dash-table           4.6.2

• if frontend related, tell us your Browser, Version and OS

  • OS: Ubuntu 16.04 LTS
  • Browser: Firefox
  • Version: 75.0 (64-bit)

Describe the bug

I'm trying to use dcc.DatePickerRange component in my application in order to create a date picker range to my graph.

I've added a start date and an end date based on my data frame, for example: start date = 1st May 2016 and end date = 3rd March 2020.

When I click on the start date, the calendar is opened and it shows the correct month and year (i.e. May 2016), but it does not happen when I click on the end date. When I click on the end date, the calendar shows the month and year related to the start date and not to the end date, as I've expected, in other words, the end date of the calendar shows May 2016 instead of March 2020.

Expected behavior

I believe the expected behavior would be the calendar shows the month and year related to its current value, in both start date and end date.

Another possibility could be to add a property to control this behavior, where I choose if I want to show the current date or not.

Screenshots

My application:

Web site example:

Thank you in advance.

[lunadeferrari]

Hi, any update on this? the problem still persists in June 2021 for python Dash version:
dash==1.20.0
dash-bootstrap-components==0.12.2
dash-core-components==1.16.0
dash-html-components==1.1.3
dash-renderer==1.9.1
dash-table==4.11.3

[reesg1234]

Hi, any update on this? Problem still exists in Dash 2.0.0 as of November 2021. Is the OSS milestone still being worked on?

[kurenkovk]

2.7.0 same problem. I will go for 2x SinglePicker instead.

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson

[reesg1234]

Here is a minimal reproducible example using:

Server:
OS: Debian 11
Python: 3.11.5
Dash: 2.17.1 (i.e latest)

Viewed:
Chrome Version 127.0.6533.73 (Official Build) (64-bit) on Windows 10

This is very much still an issue and Ive seen it on Windows, Chrome, Firefox and on various Linux versions of Chrome & Firefox too. Ive seen it on every Dash version Ive used in the last 4 years as well, so Im fairly sure its a real bug/unexpected behavior in dash and not just my setup :)

Its particularly annoying when the dates range is large, as a user then has to click through potentially hundreds of months to reach the end date month, while it can be worked around using 2 DatePickers, this bug means the DatePickerRange object is pretty limited in usecases.

from datetime import date
from dash import Dash, dcc, html

app = Dash(__name__)
app.layout = html.Div([
    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=date(2000, 1, 1),
        max_date_allowed=date(2024, 7, 25),
        start_date=date(2000, 1, 1),
        end_date=date(2024, 7, 25)
    ),
])

if __name__ == '__main__':
    app.run(debug=True)

As documented in the original issue back in 2020, when clicking to change the end date, I would expect the drop down calendar view of the end date to open on the month that my end date is currently set to (like start date does), but instead it opens to whatever start date is set to.

I am aware of initial_visible_month property, but that does not solve this bug.

I thnk this problem is in the Component itself which (unless I mis-understand) is written in React which I dont know, so I am unable to help with a PR sorry!

To close the issue properly, I'd suggest either deprecating the DatePickerRange (since Im unsure what it adds over 2 Date Pickers and having it continue to exist while not behaving as expected is confusing) or fix it as described in the initial post. That said I appreciate I am not the one having to do the work so if the Dash Community/Team make a deliberate decision to close this as an 'ignorable minor problem' thats understandable as well, but its not fixed atm.