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

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

有人通过选择带下拉菜单的时间范围（具有“今天”，“昨天”，“过去7天”，“过去4周”等选项）来更改DatePickerRange开始日期（X）和结束日期（Y）的想法吗？我想这应该可以通过回调实现。谢谢。

---

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},'value': date_yesterday}]  

last_7_days_list =[
            {'label': 'Start date','value': date_6_days_ago},'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")

解决方法

使用回调函数确实可以做到这一点。

据我所知，不可能在下拉列表中为每个标签存储多个值。因此，我要做的就是使下拉列表中的值与标签相同。然后在回调函数中，根据下拉列表中的选定值返回相应的开始日期和结束日期。

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