How to correctly use two DatePickerRange in a Dash Application

Dash Python
1

Hi everyone , Hope you all doing well.

I have two DatePickerRange that I want to integer in a dash application to use them as a filter further. The problem is that my Dash app only returns values of the first DatePickerRange, but not the second one …


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

app = dash.Dash(__name__)
app.layout = html.Div([
    html.H2("Date for the First period"),
    dcc.DatePickerRange(
        id='my-date-picker-range',
    min_date_allowed = date(2021,4,1),
    max_date_allowed = date(2021,9,30)
    ),
    
    html.H2("Date for the Second period"),
    
    dcc.DatePickerRange(
        id='my-date-picker-range2',
    min_date_allowed = date(2021,4,1),
    max_date_allowed = date(2021,9,30)
    ),
    
    
    html.Div(id='output-container-date-picker-range')
])


@app.callback(
    Output('output-container-date-picker-range', 'children'),
    
    Input('my-date-picker-range', 'start_date'),
    Input('my-date-picker-range', 'end_date'),
    Input('my-date-picker-range2', 'start_date2'),
    Input('my-date-picker-range2', 'end_date2')
)

def update_output(start_date , end_date , start_date2 , end_date2):
    
        return ( str(start_date) + '   ' + str(end_date)+ '   ' +str(start_date2)+ '   ' +  str(end_date2))  


if __name__ == '__main__':
    app.run_server(debug=False)

Here is my output when I run the app :
out

2

Hi @lahyouness,

Welcome to the community!

Firstly, please be careful that you mentioned DatePickerSingle in your title and question, but in reality you are using a DatePickerRange…

Now, to your question: the problem is that you are defining the Input wrong for the second picker. It should be:

@app.callback(
    Output('output-container-date-picker-range', 'children'),
    
    Input('my-date-picker-range', 'start_date'),
    Input('my-date-picker-range', 'end_date'),
    Input('my-date-picker-range2', 'start_date'), # no 2
    Input('my-date-picker-range2', 'end_date') # no 2
)

I would also suggest you to run the application with debug=True, so you can see the error messages. In this case, it would have appeared a message informing you that “start_date2” is not a prop of dcc.DatePickerRange.

1 Like
3

Hey @jlfsjunior , Thank you for your reactivity , I couldn’t imagine that I would have an anwer in a small laps of time ,

I have a final question, how could I make a distinction between the starting day of range 1 and range 2 inside my function ?

Like for example i want to use those days as a filter , but how can I make the distinction?

Thank you a lot !

4

No worries! :smiley:

This is done by the parameter order in the function signature. As you have done it:

def update_output(start_date , end_date , start_date2 , end_date2)

The first Input will be start_date in the function body, the second end_date and so on… So this part is ok in your code. Dash v2 has a more flexible approach, here is the link in case you are interested.

1 Like
5

You rock it José Luiz Ferreira, Thank you very much, you are not anymore a Junior , you are a mentor :smiley:

Thank you again, and have a nice week end !

2 Likes