DatePicker

DatePicker is a form component for date inputs.

APIPassThroughAccessibility

Download # 


npx volt-vue add DatePicker

Import # 


import DatePicker from '@/volt/DatePicker.vue';

Basic #

DatePicker is used with the v-model property for two-way value binding.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Format #

Default date format is mm/dd/yy which can be customized using the dateFormat property. 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

<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" dateFormat="dd/mm/yy" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Locale #

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

Icon #

An additional icon is displayed next to the input field when showIcon is present.


<template>
    <div class="card flex flex-wrap gap-4">
        <div class="flex-auto">
            <label for="buttondisplay" class="font-bold block mb-2"> Button </label>
            <DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
        </div>
        <div class="flex-auto">
            <label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
            <DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
        </div>
        <div class="flex-auto">
            <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
            <DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
                <template #inputicon="slotProps">
                    <i class="pi pi-clock" @click="slotProps.clickCallback" />
                </template>
            </DatePicker>
        </div>
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const buttondisplay = ref(null);
const icondisplay = ref(null);
const templatedisplay = ref(null);
</script>

Min / Max #

Boundaries for the permitted dates that can be entered are defined with minDate and maxDate properties.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

let today = new Date();
let month = today.getMonth();
let year = today.getFullYear();
let prevMonth = (month === 0) ? 11 : month -1;
let prevYear = (prevMonth === 11) ? year - 1 : year;
let nextMonth = (month === 11) ? 0 : month + 1;
let nextYear = (nextMonth === 0) ? year + 1 : year;

const date = ref(null);
const minDate = ref(new Date());
const maxDate = ref(new Date());

minDate.value.setMonth(prevMonth);
minDate.value.setFullYear(prevYear);
maxDate.value.setMonth(nextMonth);
maxDate.value.setFullYear(nextYear);
</script>

Multiple #

In order to choose multiple dates, set selectionMode as multiple. In this mode, the value binding should be an array.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const dates = ref(null);
</script>

Range #

A range of dates can be selected by defining selectionMode as range, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const dates = ref(null);
</script>

Button Bar #

When showButtonBar is present, today and clear buttons are displayed at the footer.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" showButtonBar />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Time #

A time picker is displayed when showTime is enabled where 12/24 hour format is configured with hourFormat property. In case, only time needs to be selected, add timeOnly to hide the date section.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const datetime12h = ref(null);
const datetime24h = ref(null);
const time = ref(null);
</script>

Month Picker #

Month only picker is enabled by specifying view as month in addition to a suitable dateFormat.


<template>
   <div class="card flex justify-center">
        <DatePicker v-model="date" view="month" dateFormat="mm/yy" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Year Picker #

Specifying view as year in addition to a suitable dateFormat enables the year picker.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" view="year" dateFormat="yy" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Multiple Months #

Number of months to display is configured with the numberOfMonths property.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" :numberOfMonths="2" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Date Template #

Custom content can be placed inside date cells with the date slot that takes a Date as a parameter.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date">
            <template #date="slotProps">
                <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
                <template v-else>{{ slotProps.date.day }}</template>
            </template>
        </DatePicker>
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Inline #

DatePicker is displayed as a popup by default, add inline property to customize this behavior.

WkSuMoTuWeThFrSa
13303112345
146789101112
1513141516171819
1620212223242526
1727282930123

<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" inline showWeek class="w-full sm:w-[30rem]" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" variant="filled" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Sizes #

DatePicker provides small and large sizes as alternatives to the base.


<template>
    <div class="card flex flex-col items-center gap-4">
        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>

Invalid #

DatePicker is used with the v-model property for two-way value binding.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" :invalid="!date" placeholder="Date" />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>

Disabled #

DatePicker is used a controlled input component with v-model property.


<template>
    <div class="card flex justify-center">
        <DatePicker v-model="date" disabled />
    </div>
</template>

<script setup lang="ts">
import DatePicker from '@/volt/DatePicker.vue';
import { ref } from 'vue';

const date = ref(null);
</script>
PrimeVue 4.3.3 by PrimeTek