Date & Time Fields
Date, DateRange, Time, Duration, and Schedule fields
Form.Field.Date
Date picker for selecting a single date.
const Schema = z.object({
birthday: z.date().meta({
ui: { title: 'Date of Birth' },
}),
})
<Form.Field.Date name="birthday" />Form.Field.DateRange
Date range picker for selecting a start and end date.
const Schema = z.object({
period: z.object({
start: z.date(),
end: z.date(),
}).meta({
ui: { title: 'Booking Period' },
}),
})
<Form.Field.DateRange name="period" />Form.Field.DateTimePicker
Combined date and time selection.
const Schema = z.object({
eventDate: z.date().meta({
ui: { title: 'Event Date & Time' },
}),
})
<Form.Field.DateTimePicker name="eventDate" />Form.Field.Time
Time-only picker.
const Schema = z.object({
appointmentTime: z.string().meta({
ui: { title: 'Appointment Time' },
}),
})
<Form.Field.Time name="appointmentTime" />Form.Field.Duration
Duration input in hours and minutes.
const Schema = z.object({
taskDuration: z.number().meta({
ui: { title: 'Duration (minutes)' },
}),
})
<Form.Field.Duration name="taskDuration" />Form.Field.Schedule
Weekly schedule grid for selecting time blocks.
const Schema = z.object({
workingHours: z.any().meta({
ui: { title: 'Working Hours' },
}),
})
<Form.Field.Schedule name="workingHours" />