Skip to content

PrimeDatePicker

A FormKit wrapper for PrimeVue's DatePicker component.

Live Example on Website

Usage

vue
<FormKit type="primedatepicker" v-model="date" />

Object-based Example

vue
<script setup>
const schema = [
  { $formkit: 'primeDatePicker', id: 'basic', name: 'basic', label: 'Basic', placeholder: 'MM/DD/YYYY', validation: 'required' },
  { $formkit: 'primeDatePicker', name: 'styled', label: 'Styled', style: { background: 'gray' }, class: 'customClass', showIcon: true },
  { $formkit: 'primeDatePicker', name: 'icon', label: 'Custom Icon', dateFormat: 'yy-mm', showIcon: true, icon: 'pi pi-question' },
  { $formkit: 'primeDatePicker', name: 'range', label: 'Date Range', selectionMode: 'range', manualInput: false },
  { $formkit: 'primeDatePicker', name: 'multiple', label: 'Multiple Dates', selectionMode: 'multiple', manualInput: false },
]
const data = {}
</script>

<template>
  <FormKit :schema="schema" :data="data" />
</template>

Props

NameTypeDescription
dateFormatstringDate format
placeholderstringPlaceholder text
selectionModestringSelection mode (single, range, multiple)
inlinebooleanInline display
iconstringCustom icon
showIconbooleanShow calendar icon
manualInputbooleanAllow manual input
......See PrimeVue docs for all props

See PrimeVue DatePicker docs for more details.

FormKit PrimeVue Module