Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Date Picker on a Dark Background
We can add a date picker on a dark background with the dark and bordered props:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md bg-grey-10 text-white">
<q-date dark bordered v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
}
});
</script>
</body>
</html>
The bg-grey-10 class sets the background to black.
And the text-white class sets the text to white.
Date Picker Events
We can show date picker events with the events prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-date :events="events" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined,
events: [
"2020/12/01",
"2020/12/05",
"2020/12/06",
"2020/12/09",
"2020/12/23"
]
}
});
</script>
</body>
</html>
We can also set the events prop to a method that returns the condition we want for the day to highlight:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-date :events="eventsFn" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
},
methods: {
eventsFn(date) {
const [year, month, day] = date.split("/");
return day % 2 === 0;
}
}
});
</script>
</body>
</html>
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-date :events="eventsFn" :event-color="colorFn" v-model="date">
</q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
},
methods: {
eventsFn(date) {
const [year, month, day] = date.split("/");
return day % 2 === 0;
},
colorFn(date) {
const [year, month, day] = date.split("/");
return day % 4 === 0 ? "teal" : "orange";
}
}
});
</script>
</body>
</html>
We add the event-color prop and then set it to a function that returns the color that we want for the given date.
Conclusion
We can set the date picker options that we want in our Vue app with Quasar’s date picker.
