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.
