Author: John Au-Yeung

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Month Pickers — Allowed Months

We can change the allowed months with the date picker.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker
      v-model="date"
      :allowed-dates="allowedMonths"
      type="month"
      class="mt-4"
      min="2020-06"
      max="2020-10"
    ></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
  methods: {
    allowedMonths: (val) => parseInt(val.split("-")[1], 10) % 2 === 0,
  },
};
</script>

We have the allowedMonths method to return the condition for the date to be allowed.

Also, we have the min and max props to set the date range.

Multiple Month Pickers

We can allow a month picker to let users select multiple months.

For example, we can write:

<template>
  <v-row justify="center">
    <v-date-picker v-model="months" type="month" multiple></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    months: ["2020-09", "2020-10"],
  }),
};
</script>

to let us pick multiple months.

The multiple prop allows for multiple selections.

v-model ‘s value is an array of date strings instead of a date string.

Month Pickers — Setting Picker Width

We can set the month picker’s width.

The width prop sets the width:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" type="month" width="290" class="mt-4"></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

Also, we can set the full-width prop to make the month picker fill the screen:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" type="month" full-width class="mt-4"></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

Month Pickers Internationalization

The locale prop lets us set the language of the month picker.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" type="month" locale="sv-se"></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

We set the month picker to display in Swedish with the locale prop.

Month Picker Icons

The month picker icon lets us set the icons with various props.

For example, we can write:

<template>
  <v-row justify="center">
    <v-date-picker
      v-model="date"
      type="month"
      year-icon="mdi-calendar-blank"
      prev-icon="mdi-skip-previous"
      next-icon="mdi-skip-next"
    ></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

We set the year-icon , prev-icon and next-icon props to set the year and navigation icons.

Conclusion

We can set the month picker component with various props to style them.

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Date Picker’s Elevation

We can set the date picker’s elevation with the flat and elevation props.

To use the flat prop, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" flat></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

to make it flat.

And we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" elevation="15"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

to add a shadow below the date picker.

Date Pickers — React to Displayed Month/Year Change

We can watch the v-model value with our own watcher.

For instance, we can write:

<template>
  <v-row>
    <v-col cols="12" sm="6" class="my-2 px-1">
      <v-date-picker ref="picker" v-model="date" :picker-date.sync="pickerDate" full-width></v-date-picker>
    </v-col>
    <v-col cols="12" sm="6" class="my-2 px-1">
      <div class="title">Month ({{ date || 'change month...' }})</div>
      <ul class="ma-4">
        <li v-for="note in notes" :key="note">{{ note }}</li>
      </ul>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    pickerDate: null,
    notes: [],
    allNotes: ["foo", "bar", "baz"],
  }),
  watch: {
    pickerDate(val) {
      this.notes = [
        this.allNotes[Math.floor(Math.random() * 3)],
        this.allNotes[Math.floor(Math.random() * 3)],
      ];
    },
  },
};
</script>

The picker-date prop has the picked month value.

Then we can watch the pickerDate value and do what we want as the month value changes.

Date Pickers Internationalization

The Vuetify date picker supports internationalization.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" :first-day-of-week="0" locale="zh-cn"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

We have the locales with the locale of the date picker.

The first-day-of-week prop sets the first day of the week to the day we want.

0 is Sunday and it goes up to 6 for Saturday.

Date Picker Icons

We can set the date picker icon to what we want.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker
      v-model="date"
      year-icon="mdi-calendar-blank"
      prev-icon="mdi-skip-previous"
      next-icon="mdi-skip-next"
    ></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

We change the year-icon , prev-icon , and next-icon let us change the year and navigation icons respectively.

Read Only Date Pickers

We can make the date picker read-only with the readonly prop:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" readonly></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

Now we can’t pick anything from the date picker.

Conclusion

We can customize date pickers the way we want with Vuetify.

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Month Pickers Read Only

We can make a month picker read-only with the readonly prop:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" type="month" readonly></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

Month Pickers Current Month Indicator

The current month indicator can be changed with the show-current prop:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" type="month" :show-current="false"></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

The show-current prop set to false makes the selected month lighter.

We can also set it to a month string:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" type="month" show-current="2020-08"></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 7),
  }),
};
</script>

and the selected month will have a border around it.

Date Pickers in Dialog and Menu

We can put a date picker in a dialog box.

For example, we can write:

<template>
  <v-row justify="center">
    <v-col cols="12" sm="6" md="4">
      <v-menu
        ref="menu"
        v-model="menu"
        :close-on-content-click="false"
        :return-value.sync="date"
        transition="scale-transition"
        offset-y
        min-width="290px"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="date"
            label="Picker in menu"
            prepend-icon="event"
            readonly
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker v-model="date" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
          <v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
        </v-date-picker>
      </v-menu>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    menu: false,
  }),
};
</script>

We put our v-date-picker in a v-menu so that we can show the date picker when we click on the menu icon.

We put the v-text-field in the activator slot so that we can use the on object to listen to date picker events.

And we use the attrs object to set the props for the v-text-field .

This way, when we pick a date from the date picker, its value will be shown in the text field.

prepend-icon shows the icon.

Date Pickers — Formatting Date

We can format dates from the date picker.

For example, we can write:

<template>
  <v-row justify="center">
    <v-col cols="12" sm="6" md="4">
      <v-menu
        ref="menu"
        v-model="menu"
        :close-on-content-click="false"
        :return-value.sync="date"
        transition="scale-transition"
        offset-y
        min-width="290px"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="computedDateFormatted"
            label="Picker in menu"
            prepend-icon="event"
            readonly
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker v-model="date" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
          <v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
        </v-date-picker>
      </v-menu>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    menu: false,
  }),
  computed: {
    computedDateFormatted() {
      return this.formatDate(this.date);
    },
  },
  methods: {
    formatDate(date) {
      if (!date) return null;

      const [year, month, day] = date.split("-");
      return `${month}/${day}/${year}`;
    },
  },
};
</script>

We set the v-model of the v-text-field to the computedDateFormatted computed property.

It formats the date string with the formatDate method, which splits the original date string, and combines the parts with slashes.

Then we should see the formatted date with the text field.

Conclusion

We can set the month picker to be read-only and format the date to what we want.

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Date Picker’s Current Date Indicator

We can change the current date indicator with the show-current prop.

For example, we can write:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" :show-current="false"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

We make the circle around the current date lighter with it.

It can also be set to a date string:

<template>
  <v-row justify="center">
    <v-date-picker v-model="date" show-current="2020-07-13"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

Then we’ll see the given date have a circle around it.

Date Pickers — DOM Events for Year, Month, and Date Buttons

Date pickers emit various events for year, month, and date buttons.

We can listen to events like @click, @dblclick, @mouseenter, and more events on the date picker.

For example, we can write:

<template>
  <v-row>
    <v-col class="my-2 px-1" cols="12" sm="6">
      <v-date-picker
        v-model="date"
        @contextmenu:year="contextMenu"
        @dblclick:date="dblClick"
        @mouseenter:month="mouseEnter"
        @mouseleave:month="mouseLeave"
      ></v-date-picker>
    </v-col>

    <v-col class="my-2 px-1" cols="12" sm="6">
      <div class="title mb-2">{{ mouseMonth }}</div>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
    mouseMonth: null,
  }),

  methods: {
    contextMenu(year, event) {
      event.preventDefault();
      alert(`You have activated context menu for year ${year}`);
    },
    dblClick(date) {
      alert(`You have just double clicked the following date: ${date}`);
    },
    mouseEnter(month) {
      this.mouseMonth = month;
    },
    mouseLeave() {
      this.mouseMonth = null;
    },
  },
};
</script>

We listen to the mouseenter and mouseleave events on the month picker and get its value with the handler.

The month modifier indicates that we listen to month picker actions.

The contextmenu has the year modifier to listen to the year.

Month Pickers

We can create a month picker by setting v-date-picker ‘s type prop to month .

For example, we can write:

<template>
  <v-row>
    <v-col class="my-2 px-1" cols="12" sm="6">
      <v-date-picker v-model="date" type="month"></v-date-picker>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

The landscape prop makes the date picker display in landscape mode.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" type="month" landscape></v-date-picker>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

Month Pickers Colors

We can change the color of the month picker with the color and header-color props.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" type="month" color="green lighten-1"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

The header-color sets the color of the date picker header.

Conclusion

We can change the date picker with various styles.

The v-date-picker component can also be a month picker.

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Color Picker Inputs

We can hide the color picker inputs with the hide-input prop.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" hide-inputs></v-color-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Now we won’t see the numbers displayed.

Hide Canvas

The hide-canvas prop hides the canvas:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" hide-canvas></v-color-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The canvas height can be set with the canvas-height prop:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" canvas-height="300"></v-color-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

The dot-size prop changes the dot size on the canvas:

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" dot-size="30"></v-color-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Date/Month Pickers

We can add the date or month picker with the v-date-picker component.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="picker" color="green lighten-1"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    picker: new Date().toISOString().substr(0, 10),
  }),
};
</script>

We set the color of the top bar with the color prop.

And we set the v-model value to a date string.

Date Pickers — Allowed Dates

We can set the min and max dates that are allowed to be chosen.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker
      v-model="picker"
      color="green lighten-1"
      :allowed-dates="allowedDates"
      class="mt-4"
      min="2020-06-15"
      max="2021-03-20"
    ></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    picker: new Date().toISOString().substr(0, 10),
  }),

  methods: {
    allowedDates: (val) => parseInt(val.split("-")[2], 10) % 2 === 0,
  },
};
</script>

to use the allowed-dates prop to set it to a method for validating dates.

val is the date value in string form.

This way, we can only choose days that are even.

min and max sets the min and max dates that are allowed to be chosen.

Date Pickers — Setting Picker Width

We can set the date picker width with the width prop.

For example, we can write:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="picker" width="290" class="mt-4"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    picker: new Date().toISOString().substr(0, 10),
  }),
};
</script>

to set the width with the width prop.

Also, we can use the full-width prop to set the width of the date picker:

<template>
  <v-row justify="space-around">
    <v-date-picker v-model="date" full-width :landscape="$vuetify.breakpoint.smAndUp" class="mt-4"></v-date-picker>
  </v-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: new Date().toISOString().substr(0, 10),
  }),
};
</script>

The full-width prop makes the date picker fill the width of the screen.

Conclusion

We can add color pickers and date pickers with Vuetify.