Combine DateRangePicker and Dropdown in Plotly Dash

I’m trying to use DateRangePicker and Dropdown to callback a dash_table. Actually I tried to call dropdown option first and then call dash_table after calling options, but it didn’t work.
I don’t know how to add a second call back that is based on dropdown options.

Below is my code:

import pandas as pd
import numpy as np
from datetime import datetime
import as px
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_table
import dash_bootstrap_components as dbc
from datetime import datetime as dt
lst_str_cols = ['BR_CD']
dict_dtypes = {x : 'str'  for x in lst_str_cols}
df = pd.read_excel('')
df['ISSUE_DATE_2'] = df['ISSUE_DATE']
df['ISSUE_DATE'] = pd.to_datetime(df['ISSUE_DATE'],infer_datetime_format=True,errors='coerce')
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
branches = df['BR_CD'].unique().tolist()
app.layout = html.Div([
        dbc.Col([html.H5('Drop Down',className='text-center'),
            id='my-date-picker-range',  # ID to be used for callback
            calendar_orientation='horizontal',  # vertical or horizontal
            day_size=39,  # size of calendar image. Default is 39
            end_date_placeholder_text="Return",  # text that appears when no end date chosen
            with_portal=False,  # if True calendar will open in a full screen overlay portal
            first_day_of_week=0,  # Display of calendar when open (0 = Sunday)
            is_RTL=False,  # True or False for direction of calendar
            clearable=True,  # whether or not the user can clear the dropdown
            number_of_months_shown=1,  # number of months shown when calendar is open
            min_date_allowed=dt(2015, 1, 1),  # minimum date allowed on the DatePickerRange component
  ,  # maximum date allowed on the DatePickerRange component
  ,  # the month initially presented when the user opens the calendar
            start_date=dt(2015, 1, 1).date(),
            display_format='DDMMYYYY',  # how selected dates are displayed in the DatePickerRange component.
            month_format='MMMM, YYYY',  # how calendar headers are displayed when the calendar is opened.
            minimum_nights=0,  # minimum number of days between start and end date
            persistence_type='session',  # session, local, or memory. Default is 'local'
            updatemode='singledate'  # singledate or bothdates. Determines when callback is triggered
        dbc.Col([html.H5('Drop Down',className='text-center'),
                id='filter_dropdown',placeholder="Please select branch code",
                options=[{'label':br, 'value':br} for br in branches],
                value = [],
        dbc.Col([html.H5('Disbursement List',className='text-center'),
                    columns=[{"name":i,"id":i,'type':'numeric'} for i in df.columns],

@app.callback(Output('table-container', 'data'),
[Input('my-date-picker-range', 'start_date'),
 Input('my-date-picker-range', 'end_date')])

def update_data(start_date, end_date):
    data = df.loc[start_date: end_date]
    return data.to_dict('rows')

if __name__ == '__main__':
    app.run_server(debug=False, dev_tools_ui=False,port=8051)

>Solution :

You can include both filters in your callback as follows:

@app.callback(Output('table-container', 'data'),
             [Input('my-date-picker-range', 'start_date'),
              Input('my-date-picker-range', 'end_date'),
              Input('filter_dropdown', 'value')])
def update_data(selected_start_date, selected_end_date, selected_branches):

    # filter the data frame based on the DatePickerRange selection
    data = df[(df.index >= selected_start_date) & (df.index <= selected_end_date)]

    # filter the data frame based on the Dropdown selection
    if selected_branches != []:
        data = data[data['BR_CD'].isin(selected_branches)]

    return data.to_dict(orient='records')

Leave a Reply