This page looks best with JavaScript enabled

Easier Date Picker in Vuetify

 ·   ·  ☕ 1 min read

Date pickers are straight forward, but can become laborious in Vuetify components.

Look at how date pickers are implemented in Vuetify - they can cause minor trauma for a beginner.

The efficient solution is to implement a custom component. Wrap menu + input box in that generic component, and use it everywhere.

Or, just use v-datetime-picker.

Get started

Install v-datetime-picker in your Vue project.

1
2
npm install --save vuetify-datetime-picker

Add following in your main.js.

1
2
3
4
import DatetimePicker from "vuetify-datetime-picker";
import "vuetify-datetime-picker/src/stylus/main.styl";

Vue.use(DatetimePicker);

Use the new date picker in your components

Introduce this statement wherever you need a date picker.

1
2
3
4
5
6
7
8
9
<template>
  <v-layout row wrap>
    <v-datetime-picker
      label="From Date"
      v-model="fromDate"
      format="DD/MM/YYYY"
    ></v-datetime-picker>
  </v-layout>
</template>

v-datetime-picker-

image: GitHub

Enjoy life, nature, and code on.

Do note though -

  • v-datetime-picker uses a separate style file that can get messed up at times (in some form factors)
  • The date and time pick UI are not to everyone’s taste
Stay in touch!
Share on

Prashanth Krishnamurthy
WRITTEN BY
Prashanth Krishnamurthy
Technologist | Creator of Things


What's on this Page