PXD

Date Picker

Select a calendar date from an input.

Default

<script setup>
import { ref } from 'vue'

const date = ref('2024-08-15')
</script>

<template>
  <PDatePicker v-model="date" class="max-w-xs" clearable />
</template>

Formatter

label-format controls the input text. value-format controls the v-model value. Incomplete input such as 2024 is completed to 2024-01-01 when it can be parsed as a year; values that cannot be completed are restored on outside click.

Value1 formatted: 1791607298457

Value2 formatted: 2024-08-15

<script setup>
import { ref } from 'vue'

const date1 = ref(Date.now())
const date2 = ref('2024-08-15')
</script>

<template>
  <PStack direction="vertical" gap="2">
    <PText class="mb-2">Value1 formatted: {{ date1 }}</PText>
    <PText class="mb-2">Value2 formatted: {{ date2 }}</PText>

    <PDatePicker
      v-model="date1"
      class="max-w-xs"
      label-format="YYYY/MM/DD"
      value-format="timestamp"
    />
    <PDatePicker
      v-model="date2"
      class="max-w-xs"
      label-format="YYYY/MM/DD"
      value-format="YYYY-MM-DD"
    />
  </PStack>
</template>

Props

NameTypeDefaultDescription
size'sm' | 'md' | 'lg'-Size of the text input
errorboolean | string-Render the input in its error state
disabledboolean-Disable the input and block the calendar popover
clearableboolean-Show a clear button that empties the value
model-valueDate | string | number | null-Selected date, parsed with value-format then label-format
suffix-iconbooleantrueShow the calendar icon in the input suffix
placeholderstring-Placeholder text of the input
is-date-disabled(timestamp: number) => boolean-Validator forwarded to the calendar to grey out days
close-on-press-escapebooleantrueClose the calendar popover when pressing Escape
label-formatstringYYYY-MM-DDInput display format
value-formatstringYYYY-MM-DDOutput format for v-model. Use 'timestamp' or a Day.js format string

Events

NameTypeDescription
change(value: ComponentDateTimeValue) => voidEmitted when a date different from the current one is committed, by picking it in the calendar, typing it into the field or clearing the field.
update:modelValue(value: ComponentDateTimeValue) => voidEmitted together with change when a date different from the current one is committed.

Source

Source