CODEWITHSUNDEEP
datetimevue.js
Visovan Mihai
Visovan Mihai

Reputation: 425

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

What I am trying to do is use only v-date-picker without any other time-pickers. I was wondering if there is any way to change the type of v-date-picker in VueJS to be able to pick also hours, minutes and seconds (besides date). Thanks in advance!

Upvotes: 0

Views: 5140

Answers (2)

Erick Boshoff
Erick Boshoff

Reputation: 1583

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' },
  ],

Upvotes: 0

Jeanpaul1304
Jeanpaul1304

Reputation: 61

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

Upvotes: 1

Related Questions