Datepicker

Base input type date

Usage

Simple Usage

preview

<template>
  <p-datepicker />
</template>

Sizing

Datepicker has 4 variants size: xs, sm, md, lg, default is md.

preview

<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

preview

<template>
  <p-datepicker placeholder="Pick A Date" />
</template>

Display Format

You can date via prop format. default is dd/MM/yyyy

Please note, this component internally use date-fns for date formatting. The format tokens differ from Moment.js. See: date-fns

preview

<template>
  <p-datepicker
    v-model="value"
    format="yyyy-MM-dd" />
</template>

Limiting Date

You can limit the date via min or max props

preview

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

preview

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

preview

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

preview

<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

preview

<template>
  <p-datepicker disabled />
</template>

Readonly state

preview

<template>
  <p-datepicker readonly />
</template>

Error state

preview

<template>
  <p-datepicker error />
</template>

Clearable

Add clear button to input with prop clearable.

preview

<template>
  <p-datepicker clearable />
</template>

Binding v-model

preview

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

preview

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

preview

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
clearable	Boolean	false	Enable clear
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
container-class	String or Array or Object	-	CSS class to add in the input container

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
change	Native Date object	Event when date selected

See Also

• Calendar