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.
