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

[andreafonso]

@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?

[sh7dm]

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

[abdelaziz321]

In case anybody came here for a very quick solution without using additional plugins.

<template>
  <div>
    <v-dialog ref="offerStartedDateDialog" :return-value.sync="offer_started" width="650px">
      <template v-slot:activator="{ on }">
        <v-text-field
          dense
          readonly
          full-width
          outlined
          dir="ltr"
          v-on="on"
          clearable
          label="بداية الخصم"
          prepend-icon="mdi-calendar-month"
          :value="offer_started_date"
        ></v-text-field>
      </template>
      <div class="white">
        <div class="d-flex justify-space-between">
          <div>
            <v-date-picker
              v-model="offer_started.date"
              scrollable
              width="350px"
              flat
              locale="ar"
            />
          </div>
          <div>
            <v-time-picker
              locale="ar"
              flat
              v-model="offer_started.time"
            />
          </div>
        </div>
        <div class="text-center py-4">
          <v-btn color="primary" @click="$refs.offerStartedDateDialog.save(offer_started)">حفظ</v-btn>
        </div>
      </div>
    </v-dialog>
  </div>
</template>


<script>
export default {
  name: "record-form",


  data: function () {
    return {
      offer_started: {
        time: '00:00',
        date: new Date().toISOString().substr(0, 10)
      },
      form: {},
    };
  },


  computed: {
    offer_started_date: function () {
      if (!(this.offer_started.date && this.offer_started.time)) {
        return `${new Date().format('Y-m-d')} 00:00:00`;
      }

      return `${this.offer_started.date} ${this.offer_started.time}:00`
    }
  },


  methods: {
    addPrices(form) {
      this.form.offer_started_date = this.offer_started_date;

      // ...
    }
};
</script>

- and here is the result: