如何在 Dash Plotly 中实现 24 小时时间选择器而不需要区域时间格式？

Question

我正在尝试将时间选择器集成到我的 Dash Plotly 应用程序中。我尝试使用 type='time' 的输入，效果很好，但它选择区域时间格式。要求是允许选择 24 小时格式的时间。

这是我尝试过的基本示例：

import dash
from dash import dcc, html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Label('Select Time:'),
    dcc.Input(type='time', id='time-picker', value='12:00'),
])

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

问题：
上面的代码根据区域设置选择时间格式（例如，12 小时 AM/PM），但我需要一致的 24 小时格式。

我尝试过的：

在 dcc.Input 中设置 type='time'。 检查了浏览器设置，影响显示但不要求。

要求：
我需要一个时间选择器，允许选择 24 小时格式的时间，而不依赖于浏览器或操作系统的区域设置。

有什么建议或替代组件可以帮助在 Dash Plotly 中实现这一目标吗？

Answer 1

您可以使用您想要的格式在 Plotly Dash 中构建自己的时间选择器。这是一个使用 dcc.Dropdown 组件进行输入的简单示例。

from dash import Dash, dcc, html

hours = [f"{i:0{2}}" for i in range(24)]
minutes = [f"{i:0{2}}" for i in range(60)]
seconds = [f"{i:0{2}}" for i in range(60)]

picker_style = {
    "display": "inline-block",
    "width": "40px",
    "cursor": "pointer",
    "border": "none",
}

separator = html.Span(":")

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Label("Select Time:"),
        html.Div(
            [
                dcc.Dropdown(
                    hours,
                    placeholder="HH",
                    style=picker_style,
                ),
                separator,
                dcc.Dropdown(minutes, placeholder="MM",         style=picker_style),
                separator,
                dcc.Dropdown(seconds, placeholder="SS", style=picker_style),
            ],
            style={
                "border": "1px solid gray",
                "width": "140px",
                "display": "flex",
                "align-items": "center",
            },
        ),
    ],
    style={"font-family": "courier"},
)

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