PersonaDatepicker
Base input type date
Usage
Simple Usage
vue
<template>
<p-datepicker v-model="value" />
</template>Placeholder
You can set input placeholder via placeholder props
vue
<template>
<p-datepicker placeholder="Pick A Date" />
</template>Display Format
You can date via prop format. default is dd/MM/yyyy
vue
<template>
<p-datepicker
v-model="value"
format="yyyy-MM-dd" />
</template>Limiting Date
You can limit the date via min or max props
vue
<template>
<!-- Limit 1 Jan - 31 Dec 2022 -->
<p-datepicker
: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-datepicker
format="dd MMM yyyy"
mode="date" />
<p-datepicker
format="MMM yyyy"
mode="month" />
<p-datepicker
format="yyyy"
mode="year" />
</template>Disabled State
vue
<template>
<p-datepicker disabled />
</template>Readonly state
vue
<template>
<p-datepicker readonly />
</template>Error state
vue
<template>
<p-datepicker error />
</template>Binding v-model
vue
<template>
<p-datepicker v-vmodel="value" />
</template>Result :
-API
Props
| Props | Type | Default | Description |
|---|---|---|---|
modelValue | Date | - | v-model 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 |
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 |