Vuetify — Date Pickers and Events

Vuetify is a popular UI framework for Vue apps.

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

Date Pickers — Multiple

We can pick multiple dates if we add the multiple prop.

For example, we can write:

<template>
  <v-container>
    <v-row justify="center">
      <v-date-picker v-model="dates" multiple></v-date-picker>
    </v-row>
    <v-row justify="center">
      <p>{{dates}}</p>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dates: ["2020-09-15", "2020-09-20"],
  }),
};
</script>

to show a date picker that lets us pick multiple dates.

The dates is an array of date strings.

Date Pickers — Range

We can add the range prop to set the range.

For example, we can write:

<template>
  <v-container>
    <v-row justify="center">
      <v-date-picker v-model="dates" range></v-date-picker>
    </v-row>
    <v-row justify="center">
      <p>{{dates}}</p>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dates: ["2020-09-15"],
  }),
};
</script>

Now we can choose a range of dates.

Date Pickers — Birthday Picker

We can make a birthday picker by restructuring the date range and closing the date picker after selecting the day.

For example, we can write:

<template>
  <v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    min-width="290px"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="date"
        label="Birthday date"
        prepend-icon="event"
        readonly
        v-bind="attrs"
        v-on="on"
      ></v-text-field>
    </template>
    <v-date-picker
      ref="picker"
      v-model="date"
      :max="new Date().toISOString().substr(0, 10)"
      min="1950-01-01"
      @change="save"
    ></v-date-picker>
  </v-menu>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    date: null,
    menu: false,
  }),
  watch: {
    menu(val) {
      val && setTimeout(() => (this.$refs.picker.activePicker = "YEAR"));
    },
  },
  methods: {
    save(date) {
      this.$refs.menu.save(date);
    },
  },
};
</script>

We set the date picker to change the mode if we open the menu to 'YEAR' .

This way, we’ve to pick the year first and then pick the month and day.

Once the date changes, the save method is called to save the value to the v-model ‘s date, which is date .

Date Pickers Events

We can show events within the date picker.

For example, we can write:

<template>
  <v-row justify="space-between">
    <div>
      <div class="subheading">Defined by array</div>
      <v-date-picker v-model="date1" :events="arrayEvents" event-color="green lighten-1"></v-date-picker>
    </div>
    <div>
      <div class="subheading">Defined by function</div>
      <v-date-picker
        v-model="date2"
        :event-color="date => date[9] % 2 ? 'red' : 'yellow'"
        :events="functionEvents"
      ></v-date-picker>
    </div>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    arrayEvents: null,
    date1: new Date().toISOString().substr(0, 10),
    date2: new Date().toISOString().substr(0, 10),
  }),

  mounted() {
    this.arrayEvents = [...Array(6)].map(() => {
      const day = Math.floor(Math.random() * 30);
      const d = new Date();
      d.setDate(day);
      return d.toISOString().substr(0, 10);
    });
  },

  methods: {
    functionEvents(date) {
      const [, , day] = date.split("-");
      if ([1, 2, 3].includes(parseInt(day, 10))) return true;
      if ([10, 11, 12].includes(parseInt(day, 10))) return ["red", "#00f"];
      return false;
    },
  },
};
</script>

In the first date picker, we set the events prop to the arrayEvents array.

It’s an array with some dates.

We can also set events to a function that returns a boolean.

We can return a function with a boolean or a color string for the dot.

Conclusion

We can add date pickers to display events and change the mode on the fly.