Calendar ​

Sub-component for Datepicker

Usage ​

Simple Usage ​

<template>
  <p-calendar />
</template>

Limiting Date ​

You can limit the date via min or max props

<template>
  <!-- Limit this year only -->
  <p-calendar
    :min="min"
    :max="max" />
</template>

<script lang="ts" setup>
  import { startOfYear, endOfYear } from 'date-fns'

  const min = startOfYear(new Date())
  const max = endOfYear(new Date())
</script>

Mode Variant ​

There 3 available mode: date , month, year. default is date. it will limit user input the date.

for example, mode month make user can only select the month, but can't select what spesific date.

<template>
  <p-calendar
    mode="date" />
  <p-calendar
    mode="month" />
  <p-calendar
    mode="year" />
</template>

Disabled State ​

<template>
  <p-calendar disabled />
</template>

Readonly state ​

<template>
  <p-calendar readonly />
</template>

Range Picker ​

Set prop range to true to enable date range picker mode.

<template>
  <p-calendar range />
</template>

Min and Max Range ​

You can limit minimal and maximal date range to pick using prop min-range and max-range.

<template>
  <!-- Limit min 3 days and max 7 days -->
  <p-calendar range min-range="3D" max-range="7D" />
</template>

Min and Max Range Format ​

Value of min-range and max-range was following this format token:

You can combine multiple format in single value:

• 1W3D: 👉 1 week + 3 days
• 1M-1D30m: 👉 1 month - 1 day + 30 minutes
• 3D3D: 👉 3 days + 3 days 👉 6 days
• etc

Binding v-model ​

<template>
  <p-calendar v-model="value" />
</template>

Result :

-

Example:

<template>
  <div>
    <p-calendar v-model="value" />
    <div>
      Result: {{ value && format(value, 'dd-MM-yyyy') }}
    </div>
  </div>
</template>

<script setup>
  import { format } from 'date-fns'
</script>

v-model in range mode ​

There are 2 ways to use v-model in range mode.

1. Using basic v-model ​

You can use basic v-model to handle date range input, The value will be tuple of Date, [start, end]

result:

-

<template>
  <p-calendar v-model="result" range />
</template>

2. using v-model:start and v-model:end ​

You can specific binding the value using v-model:start or v-model:end

start:

-

end:

-

<template>
  <p-calendar
    v-model:start="start"
    v-model:end="end"
    range />
</template>

API ​

Props ​

Slots ​

Events ​

See Also ​

• Datepicker