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

Question

我正在尝试创建一个显示 'today'、'yesterday'、'last 7 days' 和 'custom' 的下拉菜单。当我在下拉菜单中选择一个选项时，我希望日历自动更新。 'custom' 我想拉出日历，这样我就可以选择任何我想要的日期。这是示例代码：

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，所以我们总是需要 return 两个值。 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()

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

Dash Dynamic Dropdown with Custom Option

python

calendar

date

plotly-dash