PrimeTek UI Component Libraries
Vue3 Calendar

Vue3 Calendar

PrimeTek's photo
PrimeTek
·

6 min read

Vue Calendar also known as DatePicker is an input component that provides real-time suggestions when being typed. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Calendar from 'primevue/calendar';

Getting Started

Two-way value binding is defined using the standard v-model directive referencing to a Date property.

<Calendar v-model="value" />

export default {
    data() {
        return {
            value: null
        }
    }
}

Calendar is displayed in a popup by default and inline property needs to be enabled for inline mode.

<Calendar v-model="value" :inline="true" />

Selection Mode

By default calendar allows selecting one date only whereas multiple dates can be selected by setting selectionMode to multiple. In this case calendar updates the value with an array of dates where optionally number of selectable dates can be restricted with maxDateCount property. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.

<Calendar v-model="value" selectionMode="single || multiple || range" />

DateFormat

Default date format is mm/dd/yy, to customize this use dateFormat property or define it at PrimeVue Locale globally. Note that standalone property overrides the value in locale settings.

<Calendar v-model="value" dateFormat="dd.mm.yy" />

Following options can be a part of the format.

  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of the year (no leading zeros)
  • oo - day of the year (three digit)
  • D - day name short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)
  • @ - Unix timestamp (ms since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text

Time

TimePicker is enabled with showTime property and 24 (default) or 12 hour mode is configured using hourFormat option. If you need to use the time picker as standalone, use the timeOnly property.

<Calendar v-model="value" :showTime="true" />
<Calendar v-model="value" :showTime="true" hourFormat="12" />
<Calendar v-model="value" :showTime="true" :timeOnly="true" />

Date Restriction

To disable entering dates manually, set manualInput to true and to restrict selectable dates with the minDate and maxDate options.

<Calendar v-model="value" :minDate="minDateValue" maxDate="maxDateValue" />

To disable specific dates or days, restrict selectable dates use disabledDates and/or disabledDays options.

<Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" />

Button Bar

Button bar displays today and clear buttons and enabled using showButtonBar property.

<Calendar v-model="value" :showButtonBar="true" />

Multiple Months

Displaying multiple months is enabled by setting numberOfMonths property to a value greater than 1.

<Calendar v-model="value" :numberOfMonths="3" />

Locale

Locale for different languages and formats is defined globally, refer to the PrimeVue Locale configuration for more information.

Custom Content

Calendar UI accepts custom content using header and footer templates.

<Calendar v-model="value">
    <template #header>Header Content</template>
    <template #footer>Footer Content</template>
</Calendar>

In addition, cell contents can be templated using a template named "date". This is a handy feature to highlight specific dates. Note that the date property of the slot props passed to the template is not a date instance but a metadata object to represent a Date with "day", "month" and "year" properties. Example below changes the background color of dates between 10th and 15th of each month.

<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>

.special-day {
    text-decoration: line-through;
}

Month Picker

Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.

<Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />

Touch UI

Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.

<Calendar v-model="value" :touchUI="true" />

Theming

Calendar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Calendar showcase for demos and documentation.

Vue.jsvueWeb DevelopmentJavaScript