Vuetify: [Feature Request] Digital timepicker.

[mads03dk]

Problem to solve

It would be awesome for (someone like) me to have the chioche of using a digital timepicker instead of an "analog" watch-style picker.

Proposed solution

To make a variant of the timepicker that makes it a digital version. Something like these: https://tempusdominus.github.io/bootstrap-4/Usage/#time-only
https://phoenixwong.github.io/vue2-timepicker/

[mimischi]

Would love to see this. What is the MD spec stance on time pickers on desktops? I feel that the time picker is the best choice on mobile devices, but super clumsy on a desktop. Google Calendar just provides a drop-down with pre-populated values.

[Alleyfield]

Personally I feel that an analog -type timepicker feels slightly awkard to use over this type of a "digital" version -- even on touch devices as the area of motion required from a finger is notably large.. Compared to it needing to be in a single smaller area and swiping up/down.

Would love to see something like this as part of the timepicker options
https://phoenixwong.github.io/vue2-timepicker/

[ggedde]

Yes, please!
This is probably the only component that I would not use as the analog is not that user friendly. I had friends and family try it out and they all thought it was awkward to use. They all preferred:
https://tempusdominus.github.io/bootstrap-4/Usage/#time-only

I think this should be a feature like no-title except the opposite where it hides the analog dial. I would recommend using "digital" as the prop.

[megaroeny]

I was also hoping there was not a radial/clock/analog version of the time picker for our desktop web app, but there wasn't ☹️ Hopefully there will be in 2.0? Or did this not make the features being released in 2.0?

[nekosaur]

It is not currently planned for 2.0

[megaroeny]

It is not currently planned for 2.0

No worries. For now we'll just use a masked input field, and if needed a drop-down with preset time intervals.

For what it's worth, I've designed a time picker that maybe you can use. It's using material components already (text buttons, icon buttons, a short text field). This is currently just used for the design team for mock-ups. 🙂

[cb109]

I would also prefer having an alternative to the awkard analog timepicker, we had a number of clients complain about the interface or not understanding it unfortunately. I know it's part of the spec, but I think the spec just isn't very practical here.

The most annoying part about creating a timepicker yourself imho is not the UI, but adding rules like AM vs PM and constraints like "a minute has at most 60 minutes and increasing more than that sets it back to zero and maybe increases hours by one" and all that stuff. It would be great to get that from the framework somehow, maybe as a mixin.

Here is my little take on an alternate timepicker https://codepen.io/cb109/pen/XwXgMJ and this one (not ready to share unfortunately) from our app:

[seanrasmussen]

Yeah, I found this thread because the Vuetify timepicker is really confusing. Guess I'll have to build my own.

[gniuslab]

It would be really good if you add this function in the following versions please!

[Gyurmatag]

Yes, please add this function!

[aFluxx]

Is this something that is consired to be added? Curious 💃

[karambaq]

Any news? It's very uncomfortable right now.

[runyasak]

I have made as wrapped component.
You can install from npm.

If you have any feedback or suggestion, please ask me.
All fix and improve PRs are accepted. 😄

https://www.npmjs.com/package/v-digital-time-picker

[joeycf]

Having a manual input with auto-formatting is something that is highly sought after that isn't really found in any Vue timepicker components. Having something similar as the links below would be amazing functionality to have in Vuetify.

https://tempusdominus.github.io/bootstrap-4/Usage/#time-only
https://www.jonthornton.com/jquery-timepicker/

[ghost]

Temporary solution.

<v-item-group>
    <v-container grid-list-md pa-0>
      <v-layout wrap>
        <v-flex xs5>
          <v-autocomplete
            v-model="endHour"
            :items="hours"
          >
          </v-autocomplete>
        </v-flex>
        <v-flex shrink align-self-center>
          <p class="mb-0">:</p>
        </v-flex>
        <v-flex xs5>
          <v-autocomplete v-model="endMinute" :items="hours"> </v-autocomplete>
        </v-flex>
      </v-layout>
    </v-container>
  </v-item-group>

[megaroeny]

Temporary solution.

``

Nice! If you use the 3 ticks for code, you'll get a code block instead so you don't lose your formatting. I noticed you joined GitHub a few days ago. 😉 You can edit your comment and try again if you want, so it's easier for others to copy.

[prem-prakash]

Analog timepicker has a horrible mobile experience. And also it seems much more complex to build. Is there any advantage on keep going with an analog timepicker?

[aldebaran798]

Any news about this? This is another reference for date and time picker, and i really love, is very settinable and user friendly.

Demo: https://fomantic-ui.com/modules/calendar.html#time-calendar

Project page: https://fomantic-ui.com/modules/calendar.html#/definition

[dsposito]

+1 Please, we need a better, non-analog option for the time picker.