如何在Dash应用中正确使用两个DatePickerSingle并解决取值异常问题

核心错误点 #

• 回调函数的输入属性配置错误：dcc.DatePickerRange组件的可监听属性固定为start_date和end_date，不会因为组件ID改为my-date-picker-range2就自动生成start_date2、end_date2属性，你填写的这两个自定义属性不存在，所以无法获取第二个日期选择器的取值。
• 代码小瑕疵：头部仅导入了datetime模块下的date类，后续调用datetime.strptime会报错，需要补充导入datetime。
• 补充说明：你需求描述中提到要使用DatePickerSingle单日期选择控件，但当前代码实际使用的是DatePickerRange范围选择控件，如果需要单日期选择可以替换对应组件。

修正后代码（保留范围选择器版本） #

from datetime import date, datetime
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import pandas as pd

# 假设你提前定义了df_sub
# Min_d =datetime.strptime(str(df_sub['From'].min()), "%Y-%m-%d %H:%M:%S")
# Max_d = datetime.strptime(str(df_sub['From'].max()), "%Y-%m-%d %H:%M:%S")

app = dash.Dash(__name__)
app.layout = html.Div([
    html.H2("Date for the First period"),
    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed = date(2021,4,1),
        max_date_allowed = date(2021,9,30)
    ),
    
    html.H2("Date for the Second period"),
    
    dcc.DatePickerRange(
        id='my-date-picker-range2',
        min_date_allowed = date(2021,4,1),
        max_date_allowed = date(2021,9,30)
    ),
    
    html.Div(id='output-container-date-picker-range')
])

@app.callback(
    Output('output-container-date-picker-range', 'children'),
    Input('my-date-picker-range', 'start_date'),
    Input('my-date-picker-range', 'end_date'),
    # 修正第二个选择器的属性名
    Input('my-date-picker-range2', 'start_date'),
    Input('my-date-picker-range2', 'end_date')
)
def update_output(start_date, end_date, start_date2, end_date2):
    return f"{str(start_date)}   {str(end_date)}   {str(start_date2)}   {str(end_date2)}"

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

若需使用DatePickerSingle单日期选择器，调整代码如下： #

from datetime import date, datetime
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__)
app.layout = html.Div([
    html.H2("Date for the First period"),
    dcc.DatePickerSingle(
        id='date-picker-single-1',
        min_date_allowed = date(2021,4,1),
        max_date_allowed = date(2021,9,30)
    ),
    
    html.H2("Date for the Second period"),
    dcc.DatePickerSingle(
        id='date-picker-single-2',
        min_date_allowed = date(2021,4,1),
        max_date_allowed = date(2021,9,30)
    ),
    
    html.Div(id='output-container')
])

@app.callback(
    Output('output-container', 'children'),
    Input('date-picker-single-1', 'date'),
    Input('date-picker-single-2', 'date')
)
def update_output(date1, date2):
    return f"第一个日期：{str(date1)}   第二个日期：{str(date2)}"

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

运行效果 #

内容的提问来源于stack exchange，提问作者younes lahouir