Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rijvi-mahmud/shaddy/llms.txt

Use this file to discover all available pages before exploring further.

DateRangePickerField wraps the DateRangePicker UI component inside ShaddyForm’s form context, allowing users to select a start and end date as a single form field. The bound value is a date range object (with from and to date properties) that is stored directly in the form state, with validation errors surfaced automatically via <FormMessage>.

​
Installation

Install all ShaddyForm fields at once with the shaddy-form registry item: 
npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form

​
Usage

"use client"
import { z } from "zod"
import { ShaddyForm } from "@/components/form/shaddy-form"
import { DateRangePickerField } from "@/components/form/fields/date-range-picker-field"
import { SubmitButton } from "@/components/form/fields/submit-button"

const schema = z.object({
  bookingRange: z.object({
    from: z.date({ message: "Start date is required." }),
    to: z.date({ message: "End date is required." }).optional(),
  }),
})

type FormValues = z.infer<typeof schema>

const initialValues: FormValues = {
  bookingRange: {
    from: new Date(),
    to: undefined,
  },
}

export default function Example() {
  return (
    <ShaddyForm
      schema={schema}
      initialValues={initialValues}
      onSubmit={(data) => console.log(data)}
    >
      <div className="space-y-4 w-96">
        <DateRangePickerField<FormValues>
          name="bookingRange"
          label="Booking Period"
          required
        />
        <SubmitButton label="Book Now" />
      </div>
    </ShaddyForm>
  )
}

​
Props

​
name
Path<T>
required
The field name. Must match a key in your Zod schema passed to ShaddyForm. The bound value is a date range object with from and to properties.
​
label
string
Label text rendered above the date range picker. Omit to hide the label.
​
required
boolean
default:"false"
When true, appends a red asterisk to the label as a visual indicator.
​
disabled
boolean
default:"false"
Declared in the field’s type interface. Note: this prop is not currently wired through to the underlying DateRangePicker component and has no effect at runtime.
​
className
string
Additional CSS classes applied to the outermost FormItem wrapper.

​
Notes

  • DateRangePickerField must be rendered inside a <ShaddyForm> — it reads control from useFormContext internally.
  • The bound value is a date range object. Structure your Zod schema with z.object({ from: z.date(), to: z.date().optional() }) — to is optional because a user may have selected only a start date. Provide matching initial values.
  • For picking a single date, use DatePickerField instead.
  • Validation errors are rendered below the date range picker via shadcn/ui’s <FormMessage>.

Build docs developers (and LLMs) love

Get started for freeTalk to us