Black Lives Matter. Please consider donating to Black Girls Code today.

Dash TimePicker

What about a time picker or a date time picker? Any suggestions for best way to ask the user to input a time range or datetime range in Dash?

1 Like

For now, you will probably just have to use a regular dcc.Input component and parse the response. Using a placeholder like HH:MM:SS could be helpful for the user. You could also try setting dcc.Input(type='time') but note that this input is not supported in Safari. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time for details.

1 Like

Thanks I’ll try these suggestions and see which works best for me.

A post was split to a new topic: Datepickerrange clearable in tabs not working as expected

Hi,

i am using type = datetime-local in dcc.Input, but i am not able to format the display, its taking local machine datetime settings. I want to put the format like YYYY-mm-dd HH:SS (24 hours format).

an urgent help on this would be useful.

Can we please but back the ‘time’ option for ‘type’? I understand that it is not supported by Safari, but apparently will default to ‘text’ for those users. I need an elegant time input component, and the native html5 works perfectly for me.

This used to be the default, but it was taken out in 0.11.1

+1 for supporting native “time” and “datetime-local” html types in dcc.Input - can we have them back please?

1 Like

Hi turns out that native html types are still supported, but the error is coming from
dev_tools_props_check.

Works perfectly when I set
app.enable_dev_tools(debug=True, dev_tools_props_check=False)
or if I don’t enable devtools at all
(I’m running dash 1.0.2)

3 Likes

Hi! I’m in for the type=type for component Input.

We’re required to use a time input in our development.

Any suggestion on the time picker? I working with selection fields, but I am having a hard time to make it elegant… any quick solution?

chrome 83 has inbuilt time picker https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html , which fair enough for my use case! It can be enabled by setting type=time in dcc.Input (though it’s a client side control rather than a parameter the developer can enforce)

I haven’t seen a solution to this problem from the Dash developers. It would be great to be able to have a date and time picker. Bonus points if the time can be picked down to the microseconds for my purpose!

1 Like