Date Picker

CDatePicker is a form component for date inputs.

Basic

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

<template>
  <CDatePicker v-model="date" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref();
</script>

Format

Default date format is mm/dd/yy which can be customized using the date-format 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>
  <CDatePicker v-model="date" date-format="yy-mm-dd" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref();
</script>

Icon

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

Button

Default Icon

Custom Icon

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

Min / Max

Boundaries for the permitted dates that can be entered are defined with min-date and max-date properties.

<template>
  <CDatePicker
      v-model="date"
      :min-date="minDate"
      :max-date="maxDate"
      :manual-input="false"
      append-to="self"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {DateTime} from "luxon";

const date = ref();
const minDate = DateTime.now().minus({ week: 1 }).toJSDate();
const maxDate = DateTime.now().plus({ week: 1 }).toJSDate();
</script>

Multiple

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

<template>
  <CDatePicker v-model="dates" selection-mode="multiple" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const dates = ref([]);
</script>

Range

A range of dates can be selected by defining selection-mode 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>
  <CDatePicker v-model="dates" selection-mode="range" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const dates = ref([]);
</script>

Button Bar

When show-button-bar is present, today and clear buttons are displayed at the footer.

<template>
  <CDatePicker v-model="dates" show-button-bar />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const date = ref();
</script>

Time

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

12 Hour Format

24 Hour Format

Time Only

<template>
  <div class="vflex flex-wrap gap-4">
    <div class="flex-auto">
      <label> 12 Hour Format </label>
      <CDatePicker v-model="date12Hour" fluid show-time hour-format="12" />
    </div>
    <div class="flex-auto">
      <label> 24 Hour Format </label>
      <CDatePicker v-model="date24Hour" fluid show-time hour-format="24" />
    </div>
    <div class="flex-auto">
      <label> Time Only </label>
      <CDatePicker v-model="timeOnlyDate" fluid show-time time-only />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date12Hour = ref();
  const date24Hour = ref();
  const timeOnlyDate = ref();
</script>

Month Picker

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

<template>
  <CDatePicker v-model="date" view="month" date-format="mm/yy" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date = ref();
</script>

Year Picker

Specifying view as year in addition to a suitable date-format enables the year picker.

<template>
  <CDatePicker v-model="date" view="year" date-format="yy" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date = ref();
</script>

Multiple Months

Number of months to display is configured with the number-of-months property.

<template>
  <CDatePicker v-model="date" :number-of-months="2" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date = ref();
</script>

Date Template

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

<template>
  <CDatePicker 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>
  </CDatePicker>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date = ref();
</script>

Inline

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

Su	Mo	Tu	We	Th	Fr	Sa
28	29	30	31	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

<template>
  <CDatePicker v-model="date" inline />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date = ref();
</script>

Filled

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

<template>
  <CDatePicker v-model="date" variant="filled" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date = ref();
</script>

Sizes

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

<template>
  <div class="flex flex-col items-center gap-4">
    <div>
      <CDatePicker v-model="date1" placeholder="Small" size="small" showIcon iconDisplay="input" />
    </div>
    <div>
      <CDatePicker v-model="date2" placeholder="Normal" showIcon iconDisplay="input" />
    </div>
    <div>
      <CDatePicker v-model="date3" placeholder="Large" size="large" showIcon iconDisplay="input" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date1 = ref();
  const date2 = ref();
  const date3 = ref();
</script>

Invalid

When the invalid property is set to true, the component is displayed in an error state.

<template>
  <CDatePicker v-model="date" placeholder="date" :invalid="!date" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date = ref();
</script>

Disabled

When the disabled property is set to true, the component is displayed in a disabled state.

<template>
  <CDatePicker v-model="date" :disabled="true" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const date = ref();
</script>