如何使 Plotly Dash 日期选择器范围和按钮工作答案

【问题标题】：How to make Plotly Dash Date Picker Range and Button Work如何使 Plotly Dash 日期选择器范围和按钮工作
【发布时间】：2018-09-20 16:35:06
【问题描述】：

我正在使用Dash by Plotly 创建仪表板，但这会将日期范围作为输入。但是我在尝试模仿here 中显示的简单示例时得到TypeError。我不明白我在做什么错。以下是我的代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from datetime import datetime as dt

app = dash.Dash(__name__)

app.config['suppress_callback_exceptions'] = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

app.layout = html.Div(children=[

    html.H1(children='AE Analytics Dashboard', style={'color': 'gray', 'text-align': 'center'}),
    html.Div(
        html.Div(
            dcc.Input(id='input-box', placeholder='Enter AE Name', type='text',value=''),
            dcc.DatePickerRange(
                id='date-picker-range',
                start_date_placeholder_text= 'Select a date!',
                end_date_placeholder_text='Select a date!'
            )
        ),
        html.Button('Submit', id='button'),
        # html.Div(id='output-container-button', children='Enter a value and press submit')
    )
])

if __name__ == "__main__":
    app.run_server(debug=True)

错误：

TypeError: unhashable type: 'DatePickerRange'

我在尝试使用 html.Button 时遇到以下错误：

TypeError: 传递给 Button 的格式字符串不受支持。格式

【问题讨论】：

标签： python-3.x plotly

【解决方案1】：

我解决了。这是一个愚蠢的错误。以下是更正后的代码，供大家参考。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from datetime import datetime as dt

app = dash.Dash(__name__)

app.config['suppress_callback_exceptions'] = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.layout = html.Div(children=[

    html.H1(children='AE Analytics Dashboard', style={'color': 'gray', 'text-align': 'center'}),
    html.Div(
        html.Div([
            dcc.Input(id='input-1-state', type='text', placeholder='AE Name', style={'text-align': 'center'}, value=''),
            dcc.DatePickerRange(
            id='date-picker-range',
            start_date_placeholder_text= 'Select a date!',
            end_date_placeholder_text='Select a date!'
        ),
            html.Button(id='submit-button', n_clicks=0, children='Submit')
            ]),
        ),
])

if __name__ == "__main__":
     app.run_server(debug=True)

【讨论】：

你能解释一下吗？我有类似的错误，我无法理解只是看你的代码。
无论您想在特定的Div 中使用什么组件，您都必须将它们包装在一个可迭代的列表中。在问题和答案之间比较html.H1下方的html.Div，如果您能发现差异，请告诉我。