Form Date Input

Date input connected to Form context with server validation errors.

Installation

bash

pnpm dlx shadcn@latest add @cs/form-date-input

tsx

import { FormDateInput } from "@/components/cs/form-date-input"

tsx

<FormDateInput name="date" />

Date input connected to Form context with server validation errors.

Name	Type	Default	Description
buttonClassName	string \| undefined	-	Additional classes applied to the date picker trigger.
calendarClassName	string \| undefined	-	Additional classes applied to the calendar panel.
defaultValue	Date \| DateRange \| Date[] \| undefined	-	Initial selected date value for uncontrolled usage.
label	ReactNode	-	Field label and fallback placeholder.
mode	"multiple" \| "single" \| "range" \| undefined	-	Selection mode for a single date. Selection mode for a date range. Selection mode for multiple dates.
name *	string	-	Form field name used for submission and validation errors.
onValueChange	((date: Date \| undefined) => void) \| ((date: DateRange \| undefined) => void) \| ((date: Date[] \| undefined) => void) \| ((date: Date) => void) \| ((date: DateRange) => void) \| ((date: Date[]) => void) \| undefined	-	Called when the selected date value changes.
orientation	"vertical" \| "horizontal" \| "responsive" \| null \| undefined	-	Layout of the field label and date picker.
placeholder	string \| undefined	-	Text displayed before a date is selected.
required	boolean \| undefined	-	Allows an empty selection. Requires a selected date value.
value	Date \| DateRange \| Date[] \| undefined	-	Controlled selected date value.
valueFormatter	((date: Date) => string) \| undefined	-	Formats selected dates for display in the trigger.