Vue 3 Development with the PrimeVue Framework — Date and Time Picker

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.