How do I use datepicker in Plotly Dash to use the starting date and ending date as inputs in a function callback?

Dash Python
1

I am trying to build a dash app where, among other things, a user should be able to write an input in a textbox and select a starting date and an ending date from a datepicker, and a graph is displayed according to these 3 inputs.

The relevant part of my code to do this is:

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


app.layout = html.Div(children=[
    html.H1(children='Input to graph'),
    dcc.Input(id='input', value='', type='text'),
    dcc.DatePickerRange(
        id='date-picker-range',
        start_date_placeholder_text='Select a starting date',
        end_date_placeholder_text='Select an ending date',
        start_date='',
        end_date=''
    ),

    html.Div(id='output-graph', style={
        'color': colors['text']
    }),
])



@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='input', component_property='value')],
    [Input(component_id='date-picker-range', component_property='start_date')],
    [Input(component_id='date-picker-range', component_property='end_date')]
)
def update_value(input_data, start_date, end_date):
    start = start_date #datetime.datetime(2015, 1, 1)
    end = end_date #datetime.datetime.now()
    ### Code to plot the graph ###

I get the following error when running this code due to the line defining the date picker as an input in the function callback:

Traceback (most recent call last):
  File "stock_price.py", line 242, in <module>
    [Input(component_id='date-picker-range', component_property='end_date')]
  File "C:\Users\h473\AppData\Local\Programs\Python\Python35\lib\site-packages\dash\dash.py", line 827, in callback
    self._validate_callback(output, inputs, state, events)
  File "C:\Users\h473\AppData\Local\Programs\Python\Python35\lib\site-packages\dash\dash.py", line 606, in _validate_callback
    name.lower(), str(arg), name
dash.exceptions.IncorrectTypeException: The state argument `<dash.dependencies.Input object at 0x000001AE53750208>` is not of type `dash.State`.

What’s the error and how to fix it? The error persists even if I fill out the start & end dates in the app layout instead of leaving them empty, like so:

start_date='datetime.datetime(2015, 1, 1)',
end_date='datetime.datetime.now()'
2

All your Inputs are in their own list, they need to be in the same list.

3

Hello there!

You are correct in how to get the data from the daterangepicker, the error is coming from the syntax.

All your inputs should be in a single list, rather than individual ones, like so:

@app.callback(
Output(x, y),
[Input(a, b),
Input(a, c)]
)

The other lists are reserved for States and Events, respectively.

Hope this helps!

3 Likes