[Vuejs]-Is there anyway to use v-date-picker in Vue.js as date-time and not only as date?

1👍

You could try with https://github.com/darrenfang/vuetify-datetime-picker

<v-datetime-picker label="Select Datetime" v-model="datetime"> </v-datetime-picker>

Date selector

Time selector

0👍

Using the same library referenced by Jeanpaul1304 vuetify-datetime-picker

You can implement it like the following on your component:

<v-datetime-picker
    :text-field-props="{prependIcon: 'mdi-calendar'}"
    label="Select Date Time"
    v-model="datetime"
    readonly>
    <template slot="dateIcon">
      <v-icon>mdi mdi-calendar</v-icon>
    </template>
    <template slot="timeIcon">
      <v-icon>mdi mdi-clock</v-icon>
    </template>
</v-datetime-picker>

If you’re using vuejs with nuxtjs you can add a plugin i.e. vuetify-datetime-picker.js and add the following code:

import Vue from 'vue'
import DatetimePicker from 'vuetify-datetime-picker'

Vue.use(DatetimePicker)

Then in your nuxt.config.js you can add the plugin as so:

plugins: [   
    { src: '@/plugins/vuetify-datetime-picker.js', mode: 'client' },
  ],

Leave a comment