Two Datepicker in one callback Dash Plotly Python

Question

I'm trying to set 2 date pickers in one callback, the purpose of this is to create a plot with two data frames where one corresponds to a filter with the first dropdown and the second one takes the input of the second date filter.

I've the following code: (I'm just going to put part of the code because it is quite large)

cluster = dbc.Form([
        dbc.FormGroup([
                dbc.Label('Dasboard Visión de Negocios (COVID-19)', html_for="dropdown",style={'font-family': 'arial','font-size': '2rem'}),
                dbc.Row([
# =============================================================================
#                     # Fila de dropdowns
# =============================================================================
                        dbc.Col([
                                #####  TIME PERIOD
                                dbc.Label('Periodo:', html_for="dropdown",style={'padding-top': '80px','font-family': 'arial','font-size': '1.1rem'}),
                                dcc.DatePickerRange(id='periodo_sel',
                                                    display_format='DD MMM YYYY',
                                                    minimum_nights=1,
                                                    start_date=dt(2019,1,1),
                                                    end_date=df['EFFECTIVE_START_DATE'].max(),
                                                    style={'width': 'max-content','font-family': 'arial'},
                                                    day_size = 30),
                                ##### SECOND TIME PERIOD
                                dbc.Label('Periodo 2:', html_for="dropdown",style={'padding-top': '80px','font-family': 'arial','font-size': '1.3rem'}),
                                dcc.DatePickerRange(id='periodo_sel2',
                                                    display_format='DD MMM YYYY',
                                                    minimum_nights=1,
                                                    start_date=dt(2019,1,1),
                                                    end_date=df['EFFECTIVE_START_DATE'].max(),
                                                    style={'width': 'max-content','font-family': 'arial'},
                                                    day_size = 30),
......

This is where I'm trying to create the plot:

@app.callback(Output(component_id='product_graph', component_property='figure'),
              [Input('periodo_sel','start_date'),
               Input('periodo_sel','end_date'),
               Input('periodo_sel2','start_date'),
               Input('periodo_sel2','end_date'),
               Input('periodo_sel','end_date'),
               Input('temp_select','value'),
               Input('product_select','value')])

def product_plot(start_date, end_date, temp_select, product_select):
    """
    Here is where the problem begins, because I don't know how to set a "start2" and "end2", if          you see, period has only start and end as property, so when I'm trying to set the second period it becomes redundant and takes the input of the first output
    """
    start = pd.to_datetime(start_date)
    end = pd.to_datetime(end_date)
    
    start2 = pd.to_datetime(?????)
    end2 = pd.to_datetime(?????)
    

....

erickfis erickfis · Accepted Answer · 2020-08-28T21:37:29

I've just come through this problem and I got it working.

You need to use the id on each datepicker to use its value on the callbacks. That's all. Just take a look on the following code:

On the dashboard session:

dcc.DatePickerSingle(
    id='date_start',
    date=dt.today(),
    ),
dcc.DatePickerSingle(
    id='date_end',
    date=dt.today(),
    ),
dcc.Graph(id='my_plot')

On the callback session:

@application.callback(
    Output('my_plot', 'figure'),
    [
        Input('date_start', 'date'),
        Input('date_end', 'date'),
    ]
)
def make_plot_callback(date_start, date_end):
    print(date_start, date_end)
    fig = make_plot(date_start, date_end) # define this for creating yr plot

    return fig

Two Datepicker in one callback Dash Plotly Python

1 Answers