Plotly-Dash：如何从下拉列表中动态更新 DatePickerRange

Question

有没有人知道如何更改 DatePickerRange start_date (X) & end_date (Y) 通过选择带有下拉列表的时间范围（有今天、昨天、最后 7 等选项）天、过去 4 周等）？我想这应该可以通过回调来实现。谢谢

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


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


date_today = dt.today()
date_yesterday = dt.today() - timedelta(days=1)
date_6_days_ago = dt.today() - timedelta(days=6)

today_list=[
            {'label': 'Start date', 'value': date_today},
            {'label': 'End date', 'value': date_today}]  


yesterday_list=[
            {'label': 'Start date', 'value': date_yesterday},
            {'label': 'End date', 'value': date_yesterday}]  

last_7_days_list =[
            {'label': 'Start date', 'value': date_6_days_ago},
            {'label': 'End date', 'value': date_today}] 


timeframe_list=[
            {'label': 'Today', 'value': today_list},
            {'label': 'Yesterday', 'value': yesterday_list},
            {'label': 'Last 7 days', 'value': last_7_days_list}]

datepicker_selector = dcc.DatePickerRange(
    id='datepicker',
    display_format='DD-MM-YYYY',
    first_day_of_week=1,
    start_date = X,
    end_date = Y,
    max_date_allowed=date_today)

dropdown_selector = dcc.Dropdown (id = 'timeframe_dropdown', multi=False, options=timeframe_list,value=today_list),


app.layout = html.Div([html.Div([
    html.Div(dropdown_selector),
    html.Div(datepicker_selector)
    ])])
server = app.server

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

Answer 1

这确实可以使用回调函数。

据我所知，无法在下拉列表中为每个标签存储多个值。所以我的做法是让下拉列表中的值与标签相同。然后在回调函数中 return 相应的开始和结束日期取决于在下拉列表中选择的值。

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'}
        ], 
        value='Today',
        clearable=False,
    ),
    dcc.DatePickerRange(
        id='datepicker',
        display_format='DD-MM-YYYY',
        first_day_of_week=1,
        max_date_allowed=dt.today(),
    ),
])

@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)
    else:
        return dt.today() - timedelta(6), dt.today()

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

Plotly-Dash：如何从下拉列表中动态更新 DatePickerRange

Plotly-Dash: How to update DatePickerRange dynamically from dropdown

callback

datepicker

plotly-dash