FormPickerDate

Date addition component. It is based on Dayjs and uses calendar and date data presentation components and the FormInputDate component.

Props

format

Format of the date shown

type:String

default:YYYY-MM-DD

size

Input size

type:String

default:md

values:sm, md, lg

Examples

DatePicker with validation

Your date in size SM:

Your other date:

• Given date is: 2011-04-12T10:00:00+00:00
• Another date given is: Invalid Date

template

<form-group>
  <form-field name="date" :model="date">
    <form-label text="Your date:" />
    <form-picker-date />
  </form-field>
  <form-field name="other" :model="other">
    <form-label text="Your other date:" />
    <form-picker-date />
    <form-valid success="This one is a super different date" />
  </form-field>
</form-group>

ts

import { computed } from 'vue'
import { useField, useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as zod from 'zod'
import dayjs from 'dayjs'
const { handleSubmit } = useForm()

const onSubmit = handleSubmit()
const fieldSchema = toTypedSchema(
  zod
    .string({
      required_error: 'This date is required',
      invalid_type_error: 'This is not a good date'
    })
    .datetime({ offset: true, message: 'Incorrect format' })
)
const date = useField('date', fieldSchema, { initialValue: '2011-04-12T12:00:00+02:00' })
const other = useField(
  'other',
  toTypedSchema(
    zod
      .string({
        required_error: 'This other date is required',
        invalid_type_error: 'This is not a good date'
      })
      .datetime({ offset: true, message: 'Incorrect format of another date' })
  ),
  { initialValue: '' }
)

const dataForPrint = computed(() => dayjs(date.value.value).format())
const otherdataForPrint = computed(() => dayjs(other.value.value).format())