Date Input - HapplyUI

A date input field that visually matches the Input component but opens a calendar popover for date selection.

Installation

bunx @happlyui/cli@latest add date-input

These are automatically installed when you add this component.

import * as DateInput from "@/components/ui/date-input"

<DateInput.Root value={date} onChange={setDate} placeholder="Select a date" />

Basic date input with default placeholder.

<DateInput.Root value={date} onChange={setDate} />

Date input with a custom placeholder.

<DateInput.Root value={date} onChange={setDate} placeholder="Pick a start date" />

Date input with a custom date format string (date-fns).

<DateInput.Root value={date} onChange={setDate} formatStr="MM/dd/yyyy" />

Available size variants: medium, small, and xsmall.

Medium (default)

Small

XSmall

<DateInput.Root size="small" value={date} onChange={setDate} />

Disabled date input.

<DateInput.Root disabled value={date} onChange={setDate} />

Date input with error styling.

<DateInput.Root hasError value={date} onChange={setDate} />

Date input composed with FormField for label, hint, and error.

Start Date*

When should this go live?

<FormField.Root label="Start Date" required hint="When should this go live?">
  <DateInput.Root value={date} onChange={setDate} />
</FormField.Root>

Uncontrolled date input with defaultValue and onChange callback.

<DateInput.Root defaultValue={new Date()} onChange={(d) => console.log(d)} />

The date input component. Renders as an input-styled button that opens a calendar popover.

Prop	Type	Default	Description
`value`	`Date \| undefined`	-	The controlled selected date
`defaultValue`	`Date \| undefined`	-	The initial date for uncontrolled usage
`onChange`	`(date: Date \| undefined) => void`	-	Callback when the selected date changes
`placeholder`	`string`	`'Select a date'`	Placeholder text when no date is selected
`disabled`	`boolean`	`false`	Disable the input
`formatStr`	`string`	`'LLL dd, y'`	date-fns format string for displaying the selected date
`calendarProps`	`Omit<CalendarProps, 'mode' \| 'selected' \| 'onSelect'>`	-	Additional props passed to the Calendar component
`size`	`'medium' \| 'small' \| 'xsmall'`	`'medium'`	Size variant matching the Input component
`hasError`	`boolean`	`false`	Show error styling
`leadingIcon`	`React.ElementType`	`RiCalendarLine`	Icon displayed before the date text
`popoverAlign`	`'start' \| 'center' \| 'end'`	`'start'`	Horizontal alignment of the popover
`popoverSide`	`'top' \| 'right' \| 'bottom' \| 'left'`	-	Side of the trigger to place the popover