FormPickerDaterange

DatePicker with the choice of initial and final date.

format

Format of the date

type:String

default:YYYY-MM-DD

size

Input size

type:String

default:md

values:sm, md, lg

Examples

DatePicker with validation

Your date:

-

• The start date is: Invalid Date
• The end date is: Invalid Date

template

<form-field name="date" :model="date">
  <form-label text="Your date:" />
  <form-picker-daterange />
  <form-valid success="This one is a great date" />
</form-field>

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')
useField('date.from', fieldSchema, { initialValue: '' })
useField(
  'date.to',
  toTypedSchema(
    zod
      .string({
        required_error: 'The end date is required',
        invalid_type_error: 'This is not a good end date'
      })
      .datetime({ offset: true, message: 'Incorrect format of the end date' })
  ),
  { initialValue: '' }
)
const dateFromForPrint = computed(() => dayjs(date.value.value.from).format())
const dateToForPrint = computed(() => dayjs(date.value.value.to).format())

DatePicker with validation with defined dates

Your date:

-

• The start date is: 2023-05-12T22:01:53+00:00
• The end date is: 2023-05-16T22:01:53+00:00

template

<form-field name="daterange" :model="daterange">
  <form-label text="Your date:" />
  <form-picker-daterange />
  <form-valid success="This one is a great date" />
</form-field>

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 daterange = useField('daterange')
useField('daterange.from', fieldSchema, { initialValue: '2023-05-13T00:01:53+02:00' })
useField(
  'daterange.to',
  toTypedSchema(
    zod
      .string({
        required_error: 'The end date is required',
        invalid_type_error: 'This is not a good end date'
      })
      .datetime({ offset: true, message: 'Incorrect format of the end date' })
  ),
  { initialValue: '2023-05-17T00:01:53+02:00' }
)

const daterangeFromForPrint = computed(() => dayjs(daterange.value.value.from).format())
const daterangeToForPrint = computed(() => dayjs(daterange.value.value.to).format())