[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!

[The-Mojoo]

I've also been in great need of this component recently, and the experience is so important that I've tried other components and it's always been indecent, and I'd hope Vuetify to support this feature. I noticed that this issue was raised 2 years ago, has not yet been resolved, and was not set to new Component in the 2.0 version, and I sincerely hope that developers will be able to value this feature.

[moonsphinx]

This is such an important component, I'm even surprised how deeply I need it at the moment. I hope it comes very soon to Vuetify.

[Mikilll94]

Any progress on this?

[cristianmatos]

I made a workaround for this in the meanwhile with this component: https://codepen.io/xristian/pen/VoLRYa

[positivethinking639]

@cristianmatox Can I custom datetimepicker to be like this https://ibb.co/NptQsgR? I get it from here : https://vuetifyjs.com/en/getting-started/consulting-and-support. is there a component like that in vuetify? @johnleider Maybe you can give several answer choices

[Mikilll94]

Is it going to be implemented soon?

[douglasg14b]

@cristianmatox If you add z-index: 1; to the AM/PM buttons the dropshadow won't be clipped.

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

[douglasg14b]

@gregveres That's a dead link for me , 404.

[jacekkarczmarczyk]

[link removed due to bad redirects to spam]

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

[volarname]

we need combined picker, also we need another that clock picker for time

[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