[Feature Request] Combined pickers

[mmajcenic]

Combining date and time pickers in a single picker would provide better user experience while, for example, scheduling an event, because an event could be scheduled in a single field, instead of two fields.

An example implementation:

Furthermore, in time picker, disabling selection of minutes might also be a useful feature, for situations where it is not desirable for users to select minutes.

[johnleider]

This is something that would not be part of the Vuetify core, but the front-end addon pack planned later this year. For now I'll let the issue reside here and will move it over once that repo is started.

[donPuerto]

What do you mean by addon pack? Let us know your future plans?

[johnleider]

After the Vuetify core is done I'll begin work on a frontend and backend package.

[donPuerto]

very nice, so can we recommend a request feature like calendar... By the way do we have walkthrough on how to integrate this to Laravel ?

[johnleider]

No walk-through, but it would be helpful. Once everything stabilizes with the package, I have lots of developer QoL updates I'd like to make in the way of guides and tutorials.

[scgm11]

any update on this?

[johnleider]

It's marked for the Front-end Pack milestone. Don't worry, I will be making it :)

[bdeo]

Please do not comment +1 on issues, comments are for discussion. If you'd like to show your interest in this ticket, please Vote on OP's comment with the 👍 emoji.

[maxzhou0]

the date picker and time picker are not very handy and i hope there's a new component to improve these:

• The binding data type should be Date
• expose data during the input. for example when user pick minute, how can i know which hour and date they just picked? the allowed-minutes cannot not return expected value without the informations.
• customize the input order. default is date -> hour -> minute ,but date->hour or hour->minute should be ok,

[johnleider]

In the past we used the Date object but it became a nightmare in regards to localization. Your suggestions are also unrelated to this particular feature request @maxzhou0 . Please create a new Feature Request at https://issues.vuetifyjs.com

[scgm11]

are you evaluating using moment?

[johnleider]

No. I believe the goal is to ensure we can easily hook up to other libs/functionality.

[mviens]

I also would like this combined component. I have found the Vuetify Date and Time pickers to be quite clunky compared to the other components. The best pickers I have found (Date, Time, and Date/Time) are here (https://material-ui-pickers.dev/api/datetime-picker) but these are React-based. I would like to see Vuetify match the styling, features, and smoothness with which these work.

[douglasg14b]

Was hoping vuetify had combined date-time pickers. This would go a long ways towards adding that extra bit of usability to the framework. It's awkward to have separate date and time fields.

I greatly look forward to seeing this in the future!

[afvca]

@johnleider can you give an ETA to this?

[makeit-mh]

Hey,

I'm found 2 great concepts about DateTimePicker.
First with tabs and made for Vuetify:
https://darrenfang.github.io/vuetify-datetime-picker/
And second with (in my opinion) better TimePicker concept:
https://mariomka.github.io/vue-datetime/

What do you think about that?

[dsseng]

This'll probably be added in v3 with a complete pickers rewrite.

[talski]

I came across this problem, until no official solution, here's mine

https://codepen.io/talski/pen/WNoKrJL

[gregveres]

Like @mviens, I think of all the suggestions in this thread, this one is the best: https://material-ui-pickers.dev/demo/datetime-picker one to mimic.

[gregveres]

Here is the proper link to the demo. Sorry about that. My mistake:
[link removed due to bad redirects to spam]

@jacekkarczmarczyk posted the link to the api. I am less interested in matching their api. I think the visual of that date time picker is great. Although, the difference in font between the date and the time in the header is a little odd. I would have gone for the same size font in both places.

[gregveres]

I have created a v-date-time-picker.vue prototype in Vuetify 2.0. I posted it as a gist. I now want to create a feature request for v-time-picker.vue because it is inconsistent with v-date-picker. V-data-picker allows control over which picker is visible, but v-time-picker does not. This really happers the usability of the combined picker because once the user is viewing the minutes, there is absolutely on way to get the time-picker to cycle back to the hours picker.

anyway, if someone wants to use this prototype, they are free to. I am hoping that when we get to vuetify 3, I can replace this with a native version.

There is an animated gif that shows it in action. I couldn't get vuetify working with styles in codesandbox.io.

[PHKenny]

Our company created a datetime picker using native components of Vuetify 2.6, check it out https://gitlab.com/goldenm-software/open-source-libraries/vuetify-datetime-picker