two single datepicker in Dash App throw an error (non-unique id #date)

[salwaen]

I am creating Dash App that takes start date and end date as inputs with two single Datepicker but they don't work and in Chrome console I see this error “[DOM] Found 2 elements with non-unique id #date

[DOM] Found 2 elements with non-unique id #date: (More info: https://goo.gl/9p2vKq)

 <input class=​"DateInput_input DateInput_input_1" aria-label=​"Date" type=​"text" id=​"date" name=​"date" placeholder=​"Date" autocomplete=​"off" aria-describedby=​"DateInput__screen-reader-message-date" value=​"13.11.2020">​ 

<input class=​"DateInput_input DateInput_input_1" aria-label=​"Date" type=​"text" id=​"date" name=​"date" placeholder=​"Date" autocomplete=​"off" aria-describedby=​"DateInput__screen-reader-message-date" value=​"13.11.2020">​

dash==1.8.0
thank you for all your support.

[AnnMarieW]

The ID is used to identify components in a callback and is required to be unique across all of the components in an app. If you have any more questions about this, please feel free to post this as a topic on the Dash Communty Forum

[jfogel]

@AnnMarieW The problem is that the user-set ids are different from the one that was shown above. There doesn't seem to be a way to set that id in the code.

You can see in the below image that the id I set (select_date) is not being used in the input tag that dash creates. Since I have two date pickers on my page, I get a warning even though I've set their ids to be different.

[AnnMarieW]

Hi @jfogel

I see the warning message you are referring to, but the date selection still works. See the minimal example below.
You may also use dcc.DatePickerRange to select to-from dates.

Feel free to post your question on the community forum. Please include a minimal example like the one below that demonstrates the problem and someone is likely to help.

from datetime import date
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
    [
        dcc.DatePickerSingle(id="select_date1", date=date(2021, 1, 1)),
        dcc.DatePickerSingle(id="select_date2", date=date(2021, 1, 7)),
        html.Div(id="output-div"),
    ]
)


@app.callback(
    Output("output-div", "children"),
    Input("select_date1", "date"),
    Input("select_date2", "date"),
)
def update(date1, date2):
    return f"You have selected {date1} and {date2}"


if __name__ == "__main__":
    app.run_server(debug=True)

[alexcjohnson]

Actually we @mmartinsky 🥂 modified DatePickerRange a while ago to ensure the ids are always unique - we should do the same for DatePickerSingle - see #561