PersonaDatepicker
Base input type date
Usage
Simple Usage
<template>
<p-datepicker />
</template>Sizing
Datepicker has 4 variants size: xs, sm, md, lg, default is md.
<template>
<p-datepicker size="xs" />
<p-datepicker size="sm" />
<p-datepicker size="md" />
<p-datepicker size="lg" />
</template>Placeholder
You can set input placeholder via placeholder props
<template>
<p-datepicker placeholder="Pick A Date" />
</template>Display Format
You can date via prop format. default is dd/MM/yyyy
<template>
<p-datepicker
v-model="value"
format="yyyy-MM-dd" />
</template>Limiting Date
You can limit the date via min or max props
<template>
<!-- Limit this year only -->
<p-datepicker
: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-datepicker
format="dd MMM yyyy"
mode="date" />
<p-datepicker
format="MMM yyyy"
mode="month" />
<p-datepicker
format="yyyy"
mode="year" />
</template>Range Picker
Set prop range to true to enable date range picker mode.
<template>
<p-datepicker 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-datepicker range min-range="3D" max-range="7D" />
</template>👉 See here to more information about range format value.
Disabled State
<template>
<p-datepicker disabled />
</template>Readonly state
<template>
<p-datepicker readonly />
</template>Error state
<template>
<p-datepicker error />
</template>Binding v-model
<template>
<p-datepicker v-vmodel="value" />
</template>Result :
-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-datepicker 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-datepicker
v-model:start="start"
v-model:end="end"
range />
</template>API
Props
| Props | Type | Default | Description |
|---|---|---|---|
modelValue | Date | - | v-model value |
size | String | md | Input size variant, valid value: xs, sm, md, lg |
start | Date | - | v-model:start value |
end | Date | - | v-model:end value |
placeholder | String | - | Input placeholder |
format | String | dd/MM/yyyy | Date format |
disabled | Boolean | false | Disabled state |
readonly | Boolean | false | Readonly state |
error | Boolean | false | Error state |
mode | String | - | Calendar mode valid value: date, month, year |
min | Date | - | Minimum date can be selected |
max | Date | - | Maximum date can be selected |
range | Boolean | false | Enable range picker mode |
minRange | String | - | Minimum range date should be selected |
maxRange | String | - | Maximum range date should be selected |
Slots
| Name | Description |
|---|---|
| There no slots here | |
Events
| Name | Arguments | Description |
|---|---|---|
change | Native Date object | Event when date selected |