Number and date7 checks
FormDateTime
Date and time inside a window, saved in UTC.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-date-timeNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { dateTimeField } from "@/lib/field-schemas" export const schema = z.object({ callbackAt: dateTimeField({ between: ["08:00", "17:00"], step: 15, timeZone: "Africa/Nairobi" }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormDateTime } from "@/components/form/form-date-time"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema" export function ExampleForm() { return ( <Form schema={schema} defaultValues={{ callbackAt: "" }} onSubmit={save} > <FieldGroup> <FormDateTime name="callbackAt" /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Required
defaultChoose a date and timeTime window
betweenChoose a time between 08:00 and 17:00Not in the past
disablePastChoose a time from now onWeekdays only
weekdaysChoose a weekdayMinute step
stepUse steps of 15 minutesTime zone
timeZoneNoneVirtualized list
auto above 100NoneLong lists
5-minute steps across a whole day give 288 times.
Best practices
- Store ISO 8601 in UTC and show local time with its zone
Try these values
Terminal
dateTimeField({ between: ["08:00", "17:00"], step: 15, timeZone: "Africa/Nairobi" })| Input | Result | Output |
|---|---|---|
"2026-10-14T06:00:00.000Z" | Valid | "2026-10-14T06:00:00.000Z" |
"2026-10-14T15:00:00.000Z" | Invalid | Choose a time between 08:00 and 17:00 |
"2026-10-14T06:10:00.000Z" | Invalid | Use steps of 15 minutes |
"" | Invalid | Choose a date and time |
API reference
FormDateTime
PropDescription
timeZonestringOverrides the schema's timeZone.Field frame
PropDescription
namestringKey in the schema. Also picks the preset label and autocomplete.labelReact.ReactNodeOverrides the preset label. Pass null to hide it.descriptionReact.ReactNodeHint under the control.requiredbooleanOverrides the asterisk read from the schema.fieldPropsFormFieldPropsProps for the wrapping Field, such as className.