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.
Disabled and Read-Only Time Picker
We can disable user interaction of the time picker with the disabled or readonly prop.
disabled changes the style while readonly doesn’t.
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-time v-model="timeWithSeconds" disable> </q-time>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
timeWithSeconds: undefined
}
});
</script>
</body>
</html>
to disable the time picker.
Time Picker Mask
We can add a mask to enforce the time being in a certain format.
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-time v-model="timeWithSeconds" mask="HH*mm**ss" with-seconds>
</q-time>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
timeWithSeconds: undefined
}
});
</script>
</body>
</html>
to add the mask prop to enforce the HH*mm**ss format.
We can escape characters with the [ and ] characters in the mask:
<!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-time v-model="time" mask="hh[h and ]mm[ minutes (]A)"> </q-time>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
time: undefined
}
});
</script>
</body>
</html>
The model property can be shared with the q-date date picker component to let the user set both the date and time:
<!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
v-model="model"
mask="YYYY-MM-DD HH:mm"
color="purple"
></q-date>
<q-time v-model="model" mask="YYYY-MM-DD HH:mm" color="purple">
</q-time>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: undefined
}
});
</script>
</body>
</html>
The time picker text can be localized with the locale 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-time v-model="model" :locale="locale"> </q-time>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: undefined,
locale: {
days: "Domingo_Lunes_Martes_Miércoles_Jueves_Viernes_Sábado".split(
"_"
),
daysShort: "Dom_Lun_Mar_Mié_Jue_Vie_Sáb".split("_"),
months: "Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre".split(
"_"
),
monthsShort: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Sep_Oct_Nov_Dic".split(
"_"
)
}
}
});
</script>
</body>
</html>
We set the days property to set the text for the days of the week.
daysShort set the text for the days of the week abbreviations.
months set the month text. monthsShort set the text for the month abbreviations.
Conclusion
We can add time pickers into our Vue app with Quasar.
