vuetify [Feature Request] Digital timepicker.

[Feature Request] Digital timepicker.

Open mads03dk opened this issue 5 years ago • 25 comments

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/

Apr 10 '19 07:04 mads03dk

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.

Apr 11 '19 05:04 mimischi

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/

Jun 05 '19 07:06 Alleyfield

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.

Jun 13 '19 22:06 ggedde

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?

Jun 18 '19 21:06 megaroeny

It is not currently planned for 2.0

Jun 18 '19 22:06 nekosaur

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. 🙂

Screenshot_20190618-195953

Jun 19 '19 00:06 megaroeny

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:

Peek 2019-06-26 10-29

Jun 26 '19 08:06 cb109

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

Feb 01 '20 17:02 seanrasmussen

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

Feb 04 '20 23:02 gniuslab

Yes, please add this function!

Feb 14 '20 16:02 Gyurmatag

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

Mar 09 '20 19:03 DeBelserArne

Any news? It's very uncomfortable right now.

Apr 02 '20 19:04 karambaq

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

May 17 '20 12:05 runyasak

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/

Jun 12 '20 14:06 joeycf

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>

Jul 07 '20 17:07 ghost

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.

Jul 07 '20 17:07 megaroeny

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?

Jul 18 '20 03:07 prem-prakash

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

Oct 05 '20 04:10 aldebaran798

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

Nov 20 '20 09:11 dsposito

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.

any update on this?

Mar 11 '21 19:03 volarname

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.

any update on this?

No, we never implemented it I believe haha! Never ended up needing it.

Jul 20 '21 19:07 megaroeny

Today I opened a time picker on my Android phone, and noticed that there's a Material Design update to the UI for the time picker! Maybe this could inspire an update to the Vuetify one? 😉 @KaelWD