Black Lives Matter. Please consider donating to Black Girls Code today.

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

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()'

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

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