DatePickerField: Calendar Date Picker for ShaddyForm

npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form

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

const schema = z.object({
  dob: z.date({ message: "A date of birth is required." }),
  startDate: z.date({ message: "Start date is required." }).optional(),
})

type FormValues = z.infer<typeof schema>

const initialValues: FormValues = {
  dob: new Date(),
  startDate: undefined,
}

export default function Example() {
  return (
    <ShaddyForm
      mode="onChange"
      schema={schema}
      initialValues={initialValues}
      onSubmit={(data) => console.log(data)}
    >
      <div className="space-y-4 w-72">
        <DatePickerField<FormValues>
          name="dob"
          label="Date of Birth"
          required
        />
        <DatePickerField<FormValues>
          name="startDate"
          label="Start Date"
          description="When would you like to begin?"
        />
        <SubmitButton label="Submit" />
      </div>
    </ShaddyForm>
  )
}