如何在Plotly Dash中实现用户时间输入功能

针对Dash官方未提供内置时间输入组件、dcc.Input的time类型已被移除的问题，可采用以下三种方案实现时间获取需求：

方案1：使用html.Input调用浏览器原生时间控件 #

dash.html组件库的Input直接映射原生HTML输入元素，指定type为time即可直接调用浏览器自带的时间选择控件，无需额外依赖。
示例代码：

import dash
from dash import html, Input, Output, callback

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Label("选择时间："),
    # 加step="1"属性可支持选择到秒，默认仅支持到分钟
    html.Input(type="time", id="time-input", value="12:00", step="1"),
    html.Div(id="time-output")
])

@callback(
    Output("time-output", "children"),
    Input("time-input", "value")
)
def update_time_output(time_value):
    return f"已选择的时间为：{time_value}"

if __name__ == "__main__":
    app.run_server(debug=True)

该方案特点：

• 优点：实现简单无额外依赖，自动适配浏览器的时间格式（12/24小时制）
• 缺点：不同浏览器的控件样式存在差异，自定义样式的灵活性较低

方案2：封装下拉选择组件实现自定义时间输入 #

如果需要跨端样式统一、可自定义可选时间范围，可使用dcc.Dropdown组合小时、分钟、秒的选择项自行拼接时间。
示例代码：

import dash
from dash import dcc, html, Input, Output, callback

app = dash.Dash(__name__)

# 预生成时间选项
hour_options = [{"label": f"{h:02d}时", "value": f"{h:02d}"} for h in range(24)]
minute_options = [{"label": f"{m:02d}分", "value": f"{m:02d}"} for m in range(60)]

app.layout = html.Div([
    html.Label("选择时间："),
    html.Div(style={"display": "flex", "gap": "8px", "width": "200px"}, children=[
        dcc.Dropdown(options=hour_options, value="09", id="hour-select"),
        dcc.Dropdown(options=minute_options, value="30", id="minute-select")
    ]),
    html.Div(id="custom-time-output")
])

@callback(
    Output("custom-time-output", "children"),
    Input("hour-select", "value"),
    Input("minute-select", "value")
)
def get_custom_time(hour, minute):
    full_time = f"{hour}:{minute}"
    return f"已选择的时间为：{full_time}"

if __name__ == "__main__":
    app.run_server(debug=True)

该方案特点：

• 优点：样式完全可控，可灵活限制可选时间范围（比如仅开放工作时段选项），跨端表现一致
• 缺点：需要自行处理时间拼接逻辑，要支持秒级选择需额外增加秒的下拉项

方案3：结合内置日期选择组件实现完整datetime输入 #

如果需要同时获取日期+时间，可将上述任意时间输入方案和Dash内置的dcc.DatePickerSingle/dcc.DatePickerRange组件组合，在回调中将日期值和时间值拼接为完整的datetime格式即可。

内容的提问来源于stack exchange，提问作者Mir Muntasar Ali Agha