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.
Limit Date Picker Dates
We can limit the date picker dates that we can select in the calendar.
To do this, we add the options
prop with an array of dates:
<!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 :options="options" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined,
options: [
"2020/12/01",
"2020/12/05",
"2020/12/06",
"2020/12/09",
"2020/12/23"
]
}
});
</script>
</body>
</html>
We can also limit the dates we can select with a method:
<!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 :options="optionsFn" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
},
methods: {
optionsFn(date) {
return date >= "2020/12/03" && date <= "2020/12/15";
}
}
});
</script>
</body>
</html>
We can compare the date
parameter directly with a date string and return the condition for the date that we want to select.
We can also split the date string and check against that in the condition:
<!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 :options="optionsFn" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
},
methods: {
optionsFn(date) {
const [year, month, day] = date.split("/");
return day % 2 === 0;
}
}
});
</script>
</body>
</html>
When the function returns true
, the date can be selected.
Display the Content of Events
We can display the content of events with the q-splitter
component.
For instance, 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-splitter v-model="splitterModel" style="height: 450px;">
<template v-slot:before>
<div class="q-pa-md">
<q-date v-model="date" :events="events" event-color="orange" />
</div>
</template>
<template v-slot:after>
<q-tab-panels
v-model="date"
animated
transition-prev="jump-up"
transition-next="jump-up"
>
<q-tab-panel name="2020/12/01">
<div class="text-h4 q-mb-md">2020/12/01</div>
<p>
Lorem ipsum dolor sit
</p>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
<q-tab-panel name="2020/12/05">
<div class="text-h4 q-mb-md">2020/12/05</div>
<p>
Lorem ipsum dolor sit
</p>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
<q-tab-panel name="2020/12/06">
<div class="text-h4 q-mb-md">2020/12/06</div>
<p>
Lorem ipsum dolor sit
</p>
<p>
Lorem ipsum dolor sit
</p>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: "2020/12/01",
splitterModel: 50,
events: ["2020/12/01", "2020/12/05", "2020/12/06"]
}
});
</script>
</body>
</html>
We use v-model
to bind the selected date to the date
model.
events
has the event dates.
We put the date picker on the left side with the before
slot.
The after
slot has the content we display on the right side.
We use the q-tab-panels
to display content according to the date
value.
If the date
matches the name
prop’s value on q-tab-panel
, then it’ll be displayed.
Conclusion
We can display events and limit date selections with Quasar’s date picker.