Number and date6 checks

FormDate

Type or pick a date. The calendar blocks what the schema rejects.

Example

Installation

bunx --bun shadcn@latest add @fieldkit/form-date

Needs the @fieldkit registry. Add it once

Usage

Add the field to your schema

schema.ts

import { z } from "zod"import { dateField } from "@/lib/field-schemas"
export const schema = z.object({  startDate: dateField({ disablePast: true, weekdays: true }),})

Render it inside a Form

The name prop matches the schema key.

example-form.tsx

import { Form } from "@/components/form/form"import { FormDate } from "@/components/form/form-date"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={{ startDate: "" }}      onSubmit={save}    >      <FieldGroup>        <FormDate name="startDate" />        <FormSubmit>Save</FormSubmit>      </FieldGroup>    </Form>  )}

Checks

CheckOptionError message

RequireddefaultChoose a date

Real dates onlydefaultEnter a real date

Earliest and latestmin, maxChoose a date on or after Wed 14 Oct 2026

No past datesdisablePastChoose today or a later date

Weekdays onlyweekdaysChoose a weekday

Minimum ageminAgeYou must be 18 or older

Birth dates

Birth dates are faster to type than to find in a calendar. Pass typed.

Terminal

birthDate: dateField({ minAge: 18 }),
<FormDate name="birthDate" typed />

What gets saved

Shown	Saved
Wed 14 Oct 2026	`2026-10-14`
Mon 12 Oct 2026, 10:30 Nairobi time	`2026-10-12T07:30:00.000Z`
18 Oct to 22 Oct 2026	`{ from: "2026-10-18", to: "2026-10-22" }`

Best practices

Let people type the date as well as pick it
Use typed for birth dates instead of a calendar
Store ISO dates, like 2026-10-14

Try these values

Terminal

dateField({ disablePast: true, weekdays: true })

Input	Result	Output
`"1970-01-02"`	Invalid	Choose today or a later date
`"1969-12-31"`	Invalid	Choose today or a later date
`"1970-01-03"`	Invalid	Choose today or a later date
`"2026-02-31"`	Invalid	Enter a real date
`"31/10/2026"`	Invalid	Enter a real date
`""`	Invalid	Choose a date

API reference

FormDate

PropDescription

typedbooleanDay, month and year fields instead of a calendar.

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.

Add the field to your schema

Render it inside a Form

FormDate

Field frame

Search docs