vuetify
vuetify copied to clipboard
vuetifyjs
[Feature Request] Digital timepicker.
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/
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.
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/
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.
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?
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. đ
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:
Yeah, I found this thread because the Vuetify timepicker is really confusing. Guess I'll have to build my own.
It would be really good if you add this function in the following versions please!
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
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/
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>
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.
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?
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
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?
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.
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
The Material Design spec site has been updated with the new style TimePicker for "Material You" https://material.io/components/time-pickers
I have this NPM package, I've created a couple of components that I use in my work, and I just have a digital time picker. Pull requests are welcome.
https://www.npmjs.com/package/vuetify-more-component
Hello, I have added new features to the package.
If you want to take a look. https://github.com/D4rkPK/vuetify-more-component https://www.npmjs.com/package/vuetify-more-component
đ Features
- Subtitle for Loading Overlay
- Buttons to clear and select current time for Digital Time Picker.
- Customize colors for Digital Time Picker.
- Customize colors of Loading Overlay animations.
Digital Time Picker
Default Component
Custom Component
Loading Overlay
Default Component
Custom Component
I found it easiest to use a combobox with a computed list of times
<v-combobox :items="timeList" v-model="localTime"></v-combobox>
computed: {
timeList(){
let times = []
let hours, minutes;
for(var i = 0; i <= 1425; i += 15){
hours = Math.floor(i / 60)
minutes = i % 60;
if (hours < 10){
hours = '0' + hours
}
if (minutes < 10){
minutes = '0' + minutes
}
let s = hours + ':' + minutes
times.push(s)
}
return times
},
}
