---
title: "Date & Time"
description: "Mapping of afz.calendarDate() and others to date picker, input and ISO string controls."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/auto-form/date"
---
# Date & Time

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

> [!TIP]
> See: /docs/composables/use-date-formatter
> 
> useDateFormatter documentation: a date formatting and handling utility based on @internationalized/date.

Use `afz.calendarDate()` to create a date field, powered by [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) for robust date handling:

## Date Picker

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/calendar
> 
> Calendar component documentation

Single date selection with date formatting and validation:

```vue [AutoFormFieldDatePickerExample.vue]
<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`:

```vue [AutoFormFieldDateRangeExample.vue]
<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

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/input-date
> 
> 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:

```vue [AutoFormFieldInputDateExample.vue]
<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:

```vue [AutoFormFieldInputDateRangeExample.vue]
<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`):

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/input-time
> 
> InputTime component documentation

```vue [AutoFormFieldInputTimeExample.vue]
<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

```vue [AutoFormFieldIsoExample.vue]
<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>
```


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.