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.
