带有自定义选项的 Dash 动态下拉菜单

Question

我正在尝试创建一个下拉菜单，其中显示“今天”、“昨天”、“过去 7 天”和“自定义”。当我在下拉菜单中选择一个选项时，我希望日历自动更新。对于“自定义”，我想拉日历，这样我就可以选择我想要的任何日期。这是示例代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
from datetime import date as dt, timedelta
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dcc.Dropdown(
        id = 'timeframe_dropdown', 
        multi = False, 
        options = [
            {'label': 'Today', 'value': 'Today'},
            {'label': 'Yesterday', 'value': 'Yesterday'},
            {'label': 'Last 7 days', 'value': 'Last 7 days'},
            {'label': 'Custom', 'value': 'None'}
        ], 
        value='Today',
        clearable=False,
    ),
    dcc.DatePickerRange(
        id='datepicker',
        display_format='DD-MM-YYYY',
        first_day_of_week=1,
        min_date_allowed=dt(2019, 1, 1),
        max_date_allowed=dt(2021, 2, 28),
    ),
])

@app.callback(
    [Output('datepicker', 'start_date'), # This updates the field start_date in the DatePicker
    Output('datepicker', 'end_date')], # This updates the field end_date in the DatePicker
    [Input('timeframe_dropdown', 'value')],
)
def updateDataPicker(dropdown_value):
    if dropdown_value == 'Today':
        return dt.today(), dt.today()
    elif dropdown_value == 'Yesterday':
        return dt.today() - timedelta(1), dt.today() - timedelta(1)
    elif dropdown_value == 'Last 7 days':
        return dt.today() - timedelta(6), dt.today()
    elif dropdown_value == 'Custom':
        return None
    else:
        return dt.today() - timedelta(6), dt.today()

if __name__ == '__main__':
    app.run_server(host="0.0.0.0")

下拉菜单和日历显示在该代码上，但是它们没有链接在一起。当我选择其他选项时，日历中的日期不会改变，它只是默认保持在今天的日期。

Answer 1

你快到了，只是两个小错误。

在您的下拉列表中，您正在向下拉列表 {'label': 'Custom', 'value': 'None'} 添加一个新选项。但是，您将其值设置为None。下拉值是我们在回调函数中作为输入[Input('timeframe_dropdown', 'value')] 接收的值。因此，在您的 if 语句中，您正在检查 elif dropdown_value == 'Custom':。绝不会出现这种情况，因为您将自定义标签设置为具有值 None。

另一个小错误是我们在回调中声明了两个Output 值，start_date 和end_date，所以我们需要总是返回两个值。 elif dropdown_value == 'Custom': return None 应改为 elif dropdown_value == 'Custom': return None, None。

带有修复的完整代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
from datetime import date as dt, timedelta
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dcc.Dropdown(
        id = 'timeframe_dropdown', 
        multi = False, 
        options = [
            {'label': 'Today', 'value': 'Today'},
            {'label': 'Yesterday', 'value': 'Yesterday'},
            {'label': 'Last 7 days', 'value': 'Last 7 days'},
            {'label': 'Custom', 'value': 'Custom'}
        ], 
        value='Today',
        clearable=False,
    ),
    dcc.DatePickerRange(
        id='datepicker',
        display_format='DD-MM-YYYY',
        first_day_of_week=1,
        min_date_allowed=dt(2019, 1, 1),
        max_date_allowed=dt(2021, 2, 28),
    ),
])

@app.callback(
    [Output('datepicker', 'start_date'), # This updates the field start_date in the DatePicker
    Output('datepicker', 'end_date')], # This updates the field end_date in the DatePicker
    [Input('timeframe_dropdown', 'value')],
)
def updateDataPicker(dropdown_value):
    if dropdown_value == 'Today':
        return dt.today(), dt.today()
    elif dropdown_value == 'Yesterday':
        return dt.today() - timedelta(1), dt.today() - timedelta(1)
    elif dropdown_value == 'Last 7 days':
        return dt.today() - timedelta(6), dt.today()
    elif dropdown_value == 'Custom':
        return None, None
    else:
        return dt.today() - timedelta(6), dt.today()

if __name__ == '__main__':
    app.run_server()