Skip to content
On this page

Calendar

Sub-component for Datepicker

Usage

Simple Usage

preview
vue
<template>
  <p-calendar />
</template>

Limiting Date

You can limit the date via min or max props

preview
vue
<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.

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

Disabled State

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

Readonly state

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

Range Picker

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

preview
vue
<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.

preview
vue
<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:

TokensDescription
Y or yyears
Mmonths
D or ddays
W or wweeks
H or hhours
mminutes
S or sseconds

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

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

Result :

-

Example:

Result:
preview
vue
<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]

preview

result:

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

preview

start:

-

end:

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

API

Props

PropsTypeDefaultDescription
modelValueDate-v-model value
startDate-v-model:start value
endDate-v-model:end value
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
modeString-Calendar mode valid value: date, month, year
minDate-Minimum date can be selected
maxDate-Maximum date can be selected
rangeBooleanfalseEnable range picker mode
minRangeString-Minimum range date should be selected, see range format
maxRangeString-Maximum range date should be selected, see range format

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
changeNative Date objectEvent when date selected

See Also

Released under the MIT License.