CODEWITHSUNDEEP
pythonplotly-dash
younes lahouir
younes lahouir

Reputation: 31

How to correctly use two DatePickerSingle in a Dash Application

Hope you all doing well.

I have two DatePickerSingle 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 DatePickerSingle, but not the second one ..


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

Min_d =datetime.strptime(str(df_sub['From'].min()), "%Y-%m-%d %H:%M:%S")
Max_d = datetime.strptime(str(df_sub['From'].max()), "%Y-%m-%d %H:%M:%S")


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 what I got when I run the app : enter image description here

Upvotes: 0

Views: 1501

Answers (1)

bas
bas

Reputation: 15722

The problem is with these lines:

Input('my-date-picker-range2', 'start_date2'),
Input('my-date-picker-range2', 'end_date2')

start_date2 and end_date2 are not valid properties of dcc.DatePickerRange, so change these instances to start_date and end_date.

Upvotes: 1

Related Questions