Date Input

Date picker input with optional label, validation state, and controlled value.

Installation

bash

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

Usage

tsx

import { DateInput } from "@/components/cs/date-input";

tsx

<DateInput name="start-date" label="Start date" />

Multiple dates

Lets people select and deselect several individual dates.

tsx

"use client"

import { useState } from "react"
import { DateInput } from "@/registry/cs/ui/date-input"
import { PreviewPanel } from "./preview-utils"

export default function DateInputMultiplePreview() {
	const [value, setValue] = useState<Date[]>()

	return (
		<PreviewPanel>
			<DateInput
				name="available-dates"
				mode="multiple"
				label="Available dates"
				placeholder="Select dates"
				value={value}
				onValueChange={setValue}
			/>
		</PreviewPanel>
	)
}

Date range

Selects a start and end date in one calendar.

tsx

"use client"

import { useState } from "react"
import type { DateRange } from "react-day-picker"
import { DateInput } from "@/registry/cs/ui/date-input"
import { PreviewPanel } from "./preview-utils"

export default function DateInputRangePreview() {
	const [value, setValue] = useState<DateRange>()

	return (
		<PreviewPanel>
			<DateInput
				name="booking-dates"
				mode="range"
				label="Booking dates"
				placeholder="Select dates"
				value={value}
				onValueChange={setValue}
			/>
		</PreviewPanel>
	)
}

API Reference

DateInput

Date picker input with optional label, validation state, and controlled value.

Props

Name	Type	Default	Description
buttonClassName	string	-	Additional classes applied to the date picker trigger.
calendarClassName	string	-	Additional classes applied to the calendar panel.
defaultValue	TData	-	Initial selected date value for uncontrolled usage.
error	string \| null	-	Validation error message for the field.
label	ReactNode	-	Field label and fallback placeholder.
mode	"single"	"single"	Selection mode for a single date.
name	string	-	Name used for generated hidden form inputs.
onValueChange	(date: TData \| undefined) => void	-	Called when the selected date value changes.
orientation	ComponentProps<typeof Field>["orientation"]	-	Layout of the field label and date picker.
placeholder	string	-	Text displayed before a date is selected.
required	false	-	Allows an empty selection.
value	TData	-	Controlled selected date value.
valueFormatter	(date: Date) => string	-	Formats selected dates for display in the trigger.

Dependencies

cn date-fns @cs/field @shadcn/button @shadcn/calendar @shadcn/field @shadcn/popover @shadcn/utils