How to implement a 24-hour time picker in Dash Plotly without regional time formatting?

Dash Python
1

I am trying to integrate a time picker in my Dash Plotly application. I have tried using an input with type=‘time’, which works fine, but it picks the regional time format. The requirement is to allow the selection of time in a 24-hour format.

Here’s a basic example of what I have tried:

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)

Issue: The above code picks the time format based on regional settings (e.g., 12-hour AM/PM), but I need a 24-hour format consistently.

What I have tried:

Setting type=‘time’ in dcc.Input. Checked browser settings, which affect the display but not the requirement. Requirement: I need a time picker that allows selecting time in a 24-hour format without depending on the regional settings of the browser or the operating system.

Any suggestions or alternative components that could help achieve this in Dash Plotly?

1 Like
2

Hi @dark
Welcome to the community.

How did you get that to work? dcc.Input’s typeproperty does not accept ‘time’ as a value.

3

hi @adamschroeder i just try to use time instead of text and it works. but it pick region time format

is there any another way to get the 24 hour time format?

4

Not that I know of, @dark . I know that with html.Input you can use time. But Dash doesn’t have html.Input. Could you use the dcc.Slider for this?