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>

Placement

You can customize the datepicker position using the placement prop. This flexibility ensures that the datepicker fits seamlessly within your user interface. The placement prop determines where the datepicker will appear in relation to the input field.

preview

<template>
  <p-datepicker placement="left" />
</template>

Combining Placement

You can further refine the placement by combining it with a suffix to adjust vertical/horizontal alignment. This suffix is useful for aligning the datepicker with the start (*-start) or end (*-end) of the input field.

preview

<template>
  <p-datepicker placement="bottom-end" />
</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