Inline mode for Timepicker

[karaliunas]

As for now, timepicker opens as a modal, which is fine for mobile devices. But for desktop it would be a better UX if it would open inline, because that way users don't loose the context (usually some kind of data entry form). Also, it is kind of limiting in situations where picker is in modal already.
See live example at: https://next.material-ui.com/components/time-picker/

My solution:

I suggest using optional tippy.js dropdown solution powered by Popper.js positioning engine. Also would need to implement some kind of mobile detection and I would use a "poke-it" strategy (http://www.stucox.com/blog/you-cant-detect-a-touchscreen/#poke-it) since a user has to touch/click the time icon to open the picker. Maybe anybody can suggest a more robust alternative?

This is a feature request I am filling to contribute to as I am very keen to using this component. Any ideas? Thanks!

[ChildishGiant]

I've currently got an early stage prototype implementation of the material spec time picker, but it doesn't have a modal specification so currently I haven't done anything to that

[wuda-io]

By Inline do mean that you can Render the Timepicker to a specific DOM Element? Is this correct or what so you mean? If yes then i need the Same for Datepicker.

[karaliunas]

@wuda-io by Inline I mean to render it in a popover (powered by Popper.js), positioned near the focused input field.

[gselderslaghs]

I've been working on this issue and created 2 pull request:
#582 implementation of the first Materialize display plugin "docked" the idea is that we can reuse this plugin for "docked" and "modal" view and implement this in different components such as timepicker and datepicker
#583 implementation of the "docked" plugin in the Timepicker component

Use the plugin with the following options:

displayPlugin: 'docked',
displayPluginOptions: {
// specify options here
}