Skip to content

Datepicker

Base input type date

Usage

Simple Usage

preview
vue
<template>
  <p-datepicker />
</template>

Sizing

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

preview
vue
<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
vue
<template>
  <p-datepicker placeholder="Pick A Date" />
</template>

Display Format

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

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

Limiting Date

You can limit the date via min or max props

preview
vue
<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
vue
<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
vue
<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
vue
<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
vue
<template>
  <p-datepicker disabled />
</template>

Readonly state

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

Error state

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

Binding v-model

preview
vue
<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:

-
vue
<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:

-
vue
<template>
  <p-datepicker
    v-model:start="start"
    v-model:end="end"
    range />
</template>

API

Props

PropsTypeDefaultDescription
modelValueDate-v-model value
sizeStringmdInput size variant, valid value: xs, sm, md, lg
startDate-v-model:start value
endDate-v-model:end value
placeholderString-Input placeholder
formatStringdd/MM/yyyyDate format
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state
modeString-Calendar mode valid value: date, month, year
minDate-Minimum date can be selected
maxDate-Maximum date can be selected
rangeBooleanfalseEnable range picker mode
minRangeString-Minimum range date should be selected
maxRangeString-Maximum range date should be selected

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
changeNative Date objectEvent when date selected

See Also

Released under the MIT License.