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?
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.
3 Likes
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.
1 Like
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?
2 Likes
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
Not a dash dev solution, but https://pypi.org/project/dash-datetimepicker/ this the job for me. Documentation is a little outdated.
For my app, I needed this -> dash_datetimepicker.DashDatetimepicker(id=‘my-input’,startDate=val1,endDate=val2)
You can look the original up on https://github.com/SebastianRehfeldt/dash-datepicker/tree/f8c4ed373263dfbca544d23b5e808b033a524fc9 to figure a workaround for what you want instead of having to build from scratch.
This still does not seem to be resolved. Has anyone created a Feature Request on the Plotly Dash Github?
I needed a date and time picker in my dash app running in dark mode. I tried dcc.Slider() for the year picking, dcc.DatePickerSingle() for the date and dcc.Input(type=‘time’) for the time. Styling the Slider and DatePickerSingle for dark mode worked, and input[type=time] can make the time chooser look good when not opened but I can’t style the browser-dependent popup where the hours, minutes and am/pm are chosen. I don’t have Safari but I’m sure it doesn’t work there. And I want to force 24-hour time which also doesn’t work. So it’s not much of a solution.
We really need a first-class dash TimePicker.
1 Like
For someone still struggling for a time input, check this out: Dash Mantine Components - TimeInput
One might also like: Dash Mantine Components - DatePicker
3 Likes
I got the solution of the date-time picker.
you just install the dash bootstrap package.
pip install dash-bootstrap-components
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/input/
write this code in the app layout where you write HTML code.
###################### Solution time range #############
dbc.Input(id=“date-time”,type=“datetime-local”, step=“1”)
it will show with the date and time range system.
thanks
1 Like
Hi @saddamcoder and welcome to the Dash community 
While it’s true that if you set type=“datetime-local” it appears to handle date and time selection. However, this component is based on the html Input, which has limited browser support. (This is also true for dcc.Input)
See more info at <input type="datetime-local"> - HTML: HyperText Markup Language | MDN
The control’s UI varies in general from browser to browser. In browsers with no support, these degrade gracefully to simple
<input type="text">controls.
The control is intended to represent a local date and time , not necessarily the user’s local date and time . In other words, an implementation should allow any valid combination of year, month, day, hour, and minute—even if such a combination is invalid in the user’s local time zone (such as times within a daylight saving time spring-forward transition gap). Some mobile browsers (particularly on iOS) do not currently implement this correctly.
Because of the limited browser support for
datetime-local, and the variations in how the inputs work, it may currently still be best to use a framework or library to present these, or to use a custom input of your own. Another option is to use separatedateandtimeinputs, each of which is more widely supported thandatetime-local.
Some browsers may resort to a text-only input element that validates that the results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn’t rely on this behavior since you can’t easily predict it.
I recommend trying the date and time components from the dash-mantine-components library.
1 Like
Sad I have found this doesnt work with Firefox. Works nicely with Chrome and Edge
I used 3 dropdown lists for munities, hours and PM or AM