Delta Components

Docs

Date Input

A comprehensive date picker component with calendar integration, validation, theming options, and Zod schema support for forms.

Preview

Code

Open in

Event Date

Select the date of your event

Overview

The Date Input component provides an intuitive date selection experience with calendar popup, validation, and accessibility features, making it essential for booking systems, form fields, and any date-driven functionality. It supports both controlled and uncontrolled modes with flexible date constraints and Zod schema validation, ensuring reliable date handling across your application. Perfect for creating consistent, user-friendly date selection interfaces with modern design patterns.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/date-input.json

Usage

"use client"
 
import { DateInput } from "@/registry/inputs/date-input"
 
export function Component() {
  return (
    <DateInput
      label="Birth Date"
      name="birthDate"
      description="Select your date of birth"
      placeholder="Pick a date"
      required
    />
  )
}

API Reference

Props

Prop	Type	Default	Description
`label`	`string`	-	Label for the date field (required)
`name`	`string`	-	Name of the date field for form submission (required)
`description`	`string`	`undefined`	Description text below the label
`hint`	`string`	`undefined`	Hint text below the date picker
`error`	`string`	`undefined`	Error message to display
`required`	`boolean`	`false`	Whether the field is required
`pending`	`boolean`	`false`	Whether the field is in a loading state
`defaultValue`	`Date`	`undefined`	Default selected date (uncontrolled)
`value`	`Date`	`undefined`	Controlled selected date
`placeholder`	`string`	`"Select a date"`	Placeholder text when no date is selected
`dateFormat`	`string`	`"PPP"`	Format to display the selected date
`disabled`	`boolean`	`false`	Whether the date picker is disabled
`minDate`	`Date`	`undefined`	Minimum date that can be selected
`maxDate`	`Date`	`undefined`	Maximum date that can be selected
`id`	`string`	`name`	ID for the date picker element
`variant`	`"default" \| "pill"`	`"default"`	Date picker visual variant
`coloredBorder`	`boolean`	`false`	Whether to show colored border (pill variant)
`labelVariant`	`"default" \| "muted"`	`"default"`	Label text styling variant
`containerClassName`	`string`	`""`	CSS classes for the container
`triggerClassName`	`string`	`""`	CSS classes for the trigger button
`labelClassName`	`string`	`""`	CSS classes for the label
`schema`	`ZodType<Date>`	`undefined`	Zod schema for validation
`onValidate`	`(isValid: boolean, value: Date, error?: string) => void`	`undefined`	Validation callback
`onValueChange`	`(value: Date \| undefined) => void`	`undefined`	Callback when date changes