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.
