PersonaCalendar
Sub-component for Datepicker
Usage
Simple Usage
vue
<template>
<p-calendar />
</template>Limiting Date
You can limit the date via min or max props
vue
<template>
<!-- Limit 1 Jan - 31 Dec 2022 -->
<p-calendar
:min="new Date(2022, 0, 1)"
:max="new Date(2022, 11, 31)" />
</template>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.
vue
<template>
<p-calendar
mode="date" />
<p-calendar
mode="month" />
<p-calendar
mode="year" />
</template>Disabled State
vue
<template>
<p-calendar disabled />
</template>Readonly state
vue
<template>
<p-calendar readonly />
</template>Binding v-model
vue
<template>
<p-calendar v-vmodel="value" />
</template>Result :
-Example:
Result:
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>API
Props
| Props | Type | Default | Description |
|---|---|---|---|
modelValue | Date | - | v-model value |
disabled | Boolean | false | Disabled state |
readonly | Boolean | false | Readonly state |
mode | String | - | Calendar mode valid value: date, month, year |
max | Date | - | Maximum date can be selected |
min | Date | - | Minimum date can be selected |
Slots
| Name | Description |
|---|---|
| There no slots here | |
Events
| Name | Arguments | Description |
|---|---|---|
change | Native Date object | Event when date selected |