Number and date4 checks
FormDateRange
Start and end dates. The end must come after the start.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-date-rangeNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { dateRangeField } from "@/lib/field-schemas" export const schema = z.object({ stay: dateRangeField({ disablePast: true, maxDays: 30 }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormDateRange } from "@/components/form/form-date-range"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={{ stay: { from: "", to: "" } }} onSubmit={save} > <FieldGroup> <FormDateRange name="stay" /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Both dates
defaultChoose a start and end dateEnd after start
defaultEnd date must be after start dateLongest span
maxDaysChoose 30 days or fewerShortest span
minDaysChoose at least 2 daysBest practices
- The end calendar greys out the start day and earlier
Try these values
Terminal
dateRangeField({ disablePast: true, maxDays: 30 })| Input | Result | Output |
|---|---|---|
{"from":"1970-01-02","to":"1970-01-05"} | Invalid | Choose today or a later date |
{"from":"1970-01-05","to":"1970-01-05"} | Invalid | Choose today or a later date |
{"from":"1970-01-05","to":"1970-01-02"} | Invalid | Choose today or a later date |
{"from":"1970-01-02","to":"1970-02-10"} | Invalid | Choose today or a later date |
{"from":"1970-01-02","to":"2026-13-01"} | Invalid | Choose today or a later date |
{"from":"1970-01-02","to":""} | Invalid | Choose a start and end date |
API reference
FormDateRange
PropDescription
singlebooleanOne field with a two-month calendar.startLabel, endLabelstring = "Start date", "End date"Labels for the start and end boxes.unit{ one, other } = { one: "day", other: "days" }Words for the length hint.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.