PrimeVue is a UI framework that’s compatible with Vue 3.
In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.
Date and Time Picker
We can add a date and time picker with the showTime prop:
<template>
<div>
<Calendar v-model="value" showTime />
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
};
},
methods: {},
};
</script>
showTime adds a time picker with the date picker.
We can change the time format with the hourFormat prop:
<template>
<div>
<Calendar v-model="value" showTime hourFormat="12" />
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
};
},
methods: {},
};
</script>
We can change it to 12 or 24 hour format.
We can restrict the dates that can be selected with the minDate and maxDate props:
<template>
<div>
<Calendar v-model="value" :minDate="minDateValue" :maxDate="maxDateValue" />
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
minDateValue: new Date(2020, 11, 1),
maxDateValue: new Date(2020, 11, 10),
};
},
methods: {},
};
</script>
We can also disable dates from selection with the disableDates prop:
<template>
<div>
<Calendar v-model="value" :disabledDates="invalidDates" />
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
invalidDates: [new Date(2020, 11, 1), new Date(2020, 11, 10)],
};
},
methods: {},
};
</script>
We can also disable dates by the date of the week:
<template>
<div>
<Calendar v-model="value" :disabledDays="[0, 6]" />
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
};
},
methods: {},
};
</script>
0 is Sunday and 6 is Saturday.
Also, we can add a button to the bottom of the date picker to let users select dates with the showButtonBar prop:
<template>
<div>
<Calendar v-model="value" showButtonBar />
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
};
},
methods: {},
};
</script>
We can also show multiple months in the date picker with the numberOfMonths prop:
<template>
<div>
<Calendar v-model="value" :numberOfMonths="3" />
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
};
},
methods: {},
};
</script>
We can our own header and footer content by writing:
<template>
<div>
<Calendar v-model="value">
<template #header>Header</template>
<template #footer>Footer</template>
</Calendar>
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
};
},
methods: {},
};
</script>
We can customize how dates are displayed with the default slot:
<template>
<div>
<Calendar v-model="value">
<template #date="slotProps">
<strong
v-if="slotProps.date.day > 10 && slotProps.date.day < 15"
class="special-day"
>{{ slotProps.date.day }}</strong
>
<template v-else>{{ slotProps.date.day }}</template>
</template>
</Calendar>
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: null,
};
},
methods: {},
};
</script>
<style scoped>
.special-day {
font-style: italic;
}
</style>
slotProps.date.day gets the day value.
Conclusion
We can add a date picker with various customizations into our Vue 3 app with the PrimeVue framework.
