FormPickerDatetime

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

type:String

default:YYYY-MM-DD, HH:mm

size

Input size

type:String

default:md

values:sm, md, lg

twelve

Whether the time is to be 12-hours format

type:Boolean

default:false

hoursText

Text describing the column with hours

type:String

default:Hours

minutesText

Text describing a column with minutes

type:String

default:Minutes

step

Defines the ranges of the minutes

type:Number

default:5

values:1, 2, 3, 4, 5, 6, 10, 15, 20, 30

Examples

With validation in 12 and 24-hour versions

Your date:

Your other date:

• Date is: 2011-04-12T16:45:00+00:00
• Other date is: Invalid Date

template

<form-group>
  <form-field name="date" :model="date">
    <form-label text="Your date:" />
    <form-picker-datetime twelve format="YYYY-MM-DD, hh:mm A" />
  </form-field>
  <form-field name="other" :model="other">
    <form-label text="Your other date:" />
    <form-picker-datetime />
    <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())