dcc.DatePickerRange error

Dash Python
1

Hello!

I am trying to get a DatePickerRange component to alter a table. However, I am getting an error when i attempt to do so.

Here is the section of the app.layout code itself.

app.layout = html.Div(
className=“row”,
children=[
html.Div(
dash_table.DataTable(
id=‘table-sorting-filtering’,
columns=[
{‘name’: i, ‘id’: i, ‘deletable’: True} for i in sorted(df.columns)
],
page_current= 0,
page_size= 31,
page_action=‘custom’,
filter_action=‘custom’,
filter_query=‘’,
sort_action=‘custom’,
sort_mode=‘multi’,
sort_by=,
),
style={‘height’: 750, ‘overflowY’: ‘scroll’},
className=‘six columns’
),

    html.A('Download CSV', id='my-link'),

    html.Div(
        dcc.DatePickerRange(
            id='my-date-picker-range',
            min_date_allowed=dt(2019, 8, 15),
            max_date_allowed=dt(2019, 8, 29),
            initial_visible_month=dt(2019, 8, 15),
            end_date=dt(2019, 8, 29)
        ),
        html.Div(id='output-container-date-picker-range')
    ),

    html.Div(
        id='table-paging-with-graph-container',
        className="five columns"
    ),    
    dcc.Interval(id='interval_component', interval = 5000, n_intervals=0)
]

)

here is the error in the Terminal

Traceback (most recent call last):
File “app.py”, line 52, in
html.Div(id=‘output-container-date-picker-range’)
File “C:\Users\TP_baseline\AppData\Local\Programs\Python\Python36-32\lib\site-packages\dash\development\base_component.py”, line 352, in wrapper
return func(*args, **kwargs)
File “C:\Users\TP_baseline\AppData\Local\Programs\Python\Python36-32\lib\site-packages\dash_html_components\Div.py”, line 63, in init
super(Div, self).init(children=children, **args)
File “C:\Users\TP_baseline\AppData\Local\Programs\Python\Python36-32\lib\site-packages\dash\development\base_component.py”, line 122, in init
“Prop {} has value {}\n”.format(k, repr(v))
TypeError: The dash_html_components.Div component (version 1.0.2) with the ID “Div(id=‘output-container-date-picker-range’)” detected a Component for a prop other than children
Did you forget to wrap multiple children in an array?
Prop id has value Div(id=‘output-container-date-picker-range’)

Please assist with solving the error. And is this even the right way to structure a datepickerrange to interact with the table?

2

The output indicates it is expecting the children of your html.Div to be an array. Looks like you left off the [ ]:

html.Div(
    [
        dcc.DatePickerRange(
            id='my-date-picker-range',
            min_date_allowed=dt(2019, 8, 15),
            max_date_allowed=dt(2019, 8, 29),
            initial_visible_month=dt(2019, 8, 15),
            end_date=dt(2019, 8, 29)
        ),
        html.Div(id='output-container-date-picker-range')
    ]
    )
3

Hello!

Thanks, that solved that issue, but the code still doesn’t work. Do you mind taking a look at my callbacks and seeing why? Im new to this so expect basic errors.

before callbacks

app = dash.Dash(name)
df = pd.read_csv(‘data/dashboard_data.csv’)
PAGE_SIZE = 10
app.layout [see above]

callbacks

@app.callback(
Output(‘table-sorting-filtering’, ‘data’),
[Input(‘table-sorting-filtering’, “page_current”),
Input(‘table-sorting-filtering’, “page_size”),
Input(‘table-sorting-filtering’, ‘sort_by’),
Input(‘table-sorting-filtering’, ‘filter_query’),
Input(‘interval_component’, ‘n_intervals’),
Input(‘my-date-picker-range’, ‘start_date’),
Input(‘my-date-picker-range’, ‘end_date’)])

def update_table(page_current, page_size, sort_by, filter, n_intervals, start_date, end_date):
filtering_expressions = filter.split(’ && ')
dff = df
for filter_part in filtering_expressions:
col_name, operator, filter_value = split_filter_part(filter_part)
if operator in (‘eq’, ‘ne’, ‘lt’, ‘le’, ‘gt’, ‘ge’):
# these operators match pandas series operator method names
dff = dff.loc[getattr(dff[col_name], operator)(filter_value)]
elif operator == ‘contains’:
dff = dff.loc[dff[col_name].str.contains(filter_value)]
elif operator == ‘datestartswith’:
# this is a simplification of the front-end filtering logic,
# only works with complete fields in standard format
dff = dff.loc[dff[col_name].str.startswith(filter_value)]
if len(sort_by):
dff = dff.sort_values(
[col[‘column_id’] for col in sort_by],
ascending=[
col[‘direction’] == ‘asc’
for col in sort_by
],
inplace=False
)
return dff.iloc[
page_current*page_size:(page_current+ 1)*page_size
].to_dict(‘records’)

def update_rows(n_intervals, n_clicks):
data = pd.read_csv(‘data/dashboard_data.csv’)
dict = data.to_dict(‘records’)
return dict

def update_data(start_date, end_date):
df2 = df.loc[start_date: end_date]
data = df2.to_dict(“rows”)

return data

@app.callback(
Output(‘output-container-date-picker-range’, ‘children’),
[Input(‘my-date-picker-range’, ‘start_date’),
Input(‘my-date-picker-range’, ‘end_date’)])
def update_output(start_date, end_date):
string_prefix = ‘You have selected: ’
if start_date is not None:
start_date = dt.strptime(start_date.split(’ ‘)[0], ‘%Y-%m-%d’)
start_date_string = start_date.strftime(’%B %d, %Y’)
string_prefix = string_prefix + ‘Start Date: ’ + start_date_string + ’ | ’
if end_date is not None:
end_date = dt.strptime(end_date.split(’ ‘)[0], ‘%Y-%m-%d’)
end_date_string = end_date.strftime(’%B %d, %Y’)
string_prefix = string_prefix + 'End Date: ’ + end_date_string
if len(string_prefix) == len('You have selected: '):
return ‘Select a date to see it displayed here’
else:
return string_prefix

@app.callback(
Output(‘table’, ‘columns’),
[Input(‘my-date-picker-range’, ‘start_date’),
Input(‘my-date-picker-range’, ‘end_date’)])
def update_columns(start_date, end_date):
df2 = df.loc[start_date: end_date]
columns =[{“name”: i, “id”: i} for i in df2.columns]

return columns

code for the callbacks are taken from (https://dash.plot.ly/dash-core-components/datepickerrange) and qdumount’s answer here (DatePickerRange to Update Data Table - #4 by Troy). personally im not sure if the df2 above in callbacks is right.

the error in terminal is

dash.exceptions.NonExistentIdException:
Attempting to assign a callback to the
component with the id “table” but no
components with id “table” exist in the
app’s layout.

                        Here is a list of IDs in layout:

[‘table-sorting-filtering’, ‘my-link’, ‘my-date-picker-range’, ‘output-container-date-picker-range’, ‘table-paging-with-graph-container’, ‘interval_component’]

                        If you are assigning callbacks to components
                        that are generated by other callbacks
                        (and therefore not in the initial layout), then
                        you can suppress this exception by setting
                        `suppress_callback_exceptions=True`.
4

You are defining a callback with a table component whos id is table, but it cannot find one in your layout. Update your layout with this component and you’ll get past this issue. I’m away from my dev-environment to run your code right now…

1 Like
5

Managed to get that solved and another issue pops up.

Regardless, thank you for your help with this. I really appreciate it.

6

Sure…if you get stuck again, just reply again …