DatePickerRange to Update Data Table


#1

My layout uses two dcc components a DatePickerRange and a DataTable. The datable is displaying a pandas df with ‘Date’ as a column.

I want to allow the user to select a start date & end date from the DatePickerRange and have the DataTable filter the df based on the dates selected. Seems that this is straight forward, but I get lost in writing out the function as you’ll see below:

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

def update_table(start_date, end_date):
    start_date = dt.strptime(start_date, '%Y-%m-%d')

    end_date = dt.strptime(end_date, '%Y-%m-%d')

    df2 = df[(df['Date']>start_date)&(df['Date']<end_date)]

    return df2

thanks for any help with this


#2

hi @Troy,

I faced the same issue, and actually removing dt.strptime solved it :

here is my example :

@app.callback(
    Output(component_id='chart_delay', component_property='figure'),
    [Input(component_id='my-date-picker-range', component_property='start_date'),
    Input(component_id='my-date-picker-range', component_property='end_date')]
    )
def update_chart(start_date, end_date) :
	new_results = results.loc[start_date: end_date]  

Be sure that your DataFrame has only one index and that it is convert to DateTime.

Best,

Quentin


#3

I had to do something similar, this helped me achieve the task::

@app.callback(
Output(component_id=‘chart_delay’, component_property=‘figure’),
[Input(component_id=‘my-date-picker-range’, component_property=‘start_date’),
Input(component_id=‘my-date-picker-range’, component_property=‘end_date’)]
)
def update_chart(start_date, end_date) :
df2 = df.loc[(df.Date > start_date) & (df.Date <= end_date)]