如何在Dash Plotly中实现不依赖区域设置的24小时制时间选择器

嗨，我来帮你搞定这个问题！原生的dcc.Input(type='time')确实会被浏览器或系统的区域设置影响显示格式，要实现完全不依赖这些设置的24小时制时间选择器，有两个实用的方案：

方案一：使用第三方组件dash-mantine-components（推荐） #

这个组件库提供了高度可定制的TimePicker，能强制指定24小时格式，完全不受区域设置干扰。

首先先安装组件库：

pip install dash-mantine-components

然后是完整的代码示例：

import dash
from dash import html, Input, Output, callback
import dash_mantine_components as dmc

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Label('选择时间（24小时制）:'),
    # 配置format为HH:mm，强制24小时制，withSeconds可选是否显示秒数
    dmc.TimePicker(
        id='time-picker-24h',
        format="HH:mm",
        value="12:00",
        withSeconds=False
    ),
    html.Div(id='selected-time-output')
])

@callback(
    Output('selected-time-output', 'children'),
    Input('time-picker-24h', 'value')
)
def display_selected_time(time_value):
    return f'你选择的时间是: {time_value}'

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

这个TimePicker不管用户浏览器是12小时还是24小时设置，都会以HH:mm的24小时格式显示和让用户选择，完美符合你的需求。

方案二：用Dash原生组件自定义实现 #

如果不想引入第三方组件，也可以用原生的下拉菜单自己拼一个24小时制选择器，完全自主控制格式：

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

app = dash.Dash(__name__)

# 生成00-23的小时选项和00-59的分钟选项
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(0, 60, 1)]

app.layout = html.Div([
    html.Label('选择时间（24小时制）:'),
    html.Div([
        dcc.Dropdown(
            id='hour-picker',
            options=hour_options,
            value='12',
            style={'width': '100px', 'marginRight': '10px'}
        ),
        html.Span(':'),
        dcc.Dropdown(
            id='minute-picker',
            options=minute_options,
            value='00',
            style={'width': '100px', 'marginLeft': '10px'}
        )
    ], style={'display': 'flex', 'alignItems': 'center'}),
    html.Div(id='custom-time-output')
])

@callback(
    Output('custom-time-output', 'children'),
    Input('hour-picker', 'value'),
    Input('minute-picker', 'value')
)
def combine_time(hour, minute):
    selected_time = f'{hour}:{minute}'
    return f'你选择的时间是: {selected_time}'

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

这个方案用两个下拉菜单分别选择小时（00-23）和分钟（00-59），组合成标准的24小时制时间，完全不受任何区域设置影响，就是自定义的话样式需要自己调整下。

另外补充个小细节：其实原生dcc.Input(type='time')返回的实际值是24小时格式的字符串（比如用户在12小时制界面选了1:00 PM，返回的value是'13:00'），只是显示会跟着区域变。如果你的需求只是获取24小时格式的值，显示格式无所谓，那其实原生组件也能凑合用，但如果要求显示也必须是24小时制，那还是上面两个方案更靠谱。

备注：内容来源于stack exchange，提问作者Abhishek Pandey