Date & Time

Mapping of afz.calendarDate() and others to date picker, input and ISO string controls.

useDateFormatter documentation: a date formatting and handling utility based on @internationalized/date.

Use afz.calendarDate() to create a date field, powered by @internationalized/date for robust date handling:

Date Picker

Calendar component documentation

Single date selection with date formatting and validation:

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'
import { CalendarDate } from '@internationalized/date'

const { afz } = useAutoForm()
const toast = useToast()
const formatter = useDateFormatter()

const schema = afz.object({
  appointmentDate: afz.calendarDate({ controlProps: { labelFormat: 'iso' } })
    .refine(
      date => date > new CalendarDate(2026, 1, 1),
      { message: '日期必须在 2026 年之后' }
    )
    .transform(date => formatter.toTimestamp(date))
    .meta({ label: '预约日期', description: '请选择一个在 2026 年之后的日期' })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

Date Range

Date range selection, set controlProps.range: true:

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  vacation: afz.calendarDate({
    controlProps: {
      labelFormat: 'iso',
      range: true,
      valueFormat: 'iso',
      numberOfMonths: 2
    }
  })
    .meta({
      label: '日期范围',
      hint: '选择日期范围，显示两个月'
    })
})
type Schema = z.output<typeof schema>

async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

Date Input

InputDate component documentation

Use afz.inputDate() to create a date input field, based on the UInputDate component for a native date input experience.

Single Date Input

A clean date input field, suitable for form filling:

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()
const formatter = useDateFormatter()

const schema = afz.object({
  birthDate: afz.inputDate()
    .transform(date => formatter.convertToISO(date))
    .meta({
      label: '出生日期',
      description: '使用日期输入框选择您的出生日期'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

Date Range Input

A date input field with range selection support:

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()
const formatter = useDateFormatter()

const schema = afz.object({
  eventPeriod: afz.inputDate({
    controlProps: {
      range: true
    }
  })
    .transform(date => formatter.convertToISO(date))
    .meta({
      label: '活动周期',
      hint: '选择活动的起止日期'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

Time Input

Use afz.inputTime() to create a time input field, returning the Time type (from @internationalized/date):

InputTime component documentation

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  meetingTime: afz.inputTime()
    .refine(
      time => time.hour >= 9 && time.hour < 18,
      { message: '会议时间必须在工作时间内 (9:00-18:00)' }
    )
    .transform(time => `${String(time.hour).padStart(2, '0')}:${String(time.minute).padStart(2, '0')}`)
    .meta({
      label: '会议时间',
      description: '请选择会议时间（工作时间内）'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

ISO Format Strings

For scenarios requiring ISO standard format strings, three factory methods are provided:

afz.isoDate() - validates YYYY-MM-DD format
afz.isoTime() - validates HH:MM[:SS[.s+]] format
afz.isoDatetime() - validates ISO 8601 full format

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  scheduledDate: afz.isoDate()
    .meta({
      label: '计划日期',
      description: '输入 ISO 格式日期 (YYYY-MM-DD)',
      hint: '例如: 2025-12-31'
    }),
  scheduledTime: afz.isoTime()
    .meta({
      label: '计划时间',
      description: '输入 ISO 格式时间 (HH:MM:SS)',
      hint: '例如: 14:30:00'
    }),
  createdAt: afz.isoDatetime()
    .optional()
    .meta({
      label: '创建时间',
      description: '输入 ISO 8601 完整时间戳',
      hint: '例如: 2025-12-31T14:30:00Z'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

Boolean

Mapping of afz.boolean() to checkbox, switch and slide verify controls.

Enum

Configuration methods for afz.enum() and its mapping to selection controls.