带有自定义选项的Dash动态下拉菜单 [英] Dash Dynamic Dropdown with Custom Option

问题描述

我正在尝试创建一个下拉菜单，其中显示今天"，昨天"，过去7天"和自定义".我希望日历在下拉菜单中选择一个选项后自动更新.对于自定义"，我想提取日历，以便可以选择所需的任何日期.这是示例代码:

I'm trying to create a dropdown menu that says 'today', 'yesterday', 'last 7 days' and 'custom'. I want the calendar to automatically update when I choose an option in the dropdown menu. For 'custom' I want to pull the calendar so I can choose any dates I want. Here's the sample code:

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")

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

The dropdown and calendar show up on that code, however, they are not linked together. The dates in the calendar don't change when I choose other options, it just stays in the date today by default.

推荐答案

您快到了，只有两个小错误.

You are almost there, just two small mistakes.

在下拉菜单中，您要为下拉菜单 {'label':'Custom'，'value':'None'} 添加新选项.但是，您将其值设置为 None .下拉值是我们在回调函数中作为输入 [Input('timeframe_dropdown'，'value')] 收到的值.因此，在if语句中，您正在检查 elif dropdown_value =='Custom':.因为您将自定义"标签设置为值 None .

In your dropdown you are adding a new option to your dropdown {'label': 'Custom', 'value': 'None'}. However you are setting its value to None. The dropdown value are the ones we receive in the callback function as input [Input('timeframe_dropdown', 'value')]. So in your if-statement you are checking elif dropdown_value == 'Custom':. This will never be the case, as you set the Custom label to have value None.

另一个小错误是我们在回调中声明了两个 Output 值，分别是 start_date 和 end_date ，因此我们需要始终返回两个值. elif dropdown_value =='自定义':返回无应该改为 elif dropdown_value =='自定义':返回None，无.

Another little mistake is that we are declaring two Output values in the callback, both start_date and end_date, so we need to always return two values. elif dropdown_value == 'Custom': return None should instead be 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动态下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！