/ux
Components/Misc/DateInput

DateInput

Misc

Masked date text input (DD/MM/YYYY) with calendar trigger.

Displays a formatted date string in a text-like input. Clicking opens a popover calendar grid with full keyboard navigation. Accepts minDate and maxDate bounds. Uses date-fns internally.

Usage

import { DateInput } from "nosible-ux"

export default function Example() {
  return <DateInput label="Signal start date" />
}

Examples

With bounds and clearable

Custom format

Accessibility

Calendar grid uses arrow keys for day navigation, Home/End for row edges, Page Up/Down for month steps. Selected date has aria-selected="true". Input is linked to the label.

Props

Name TypeDefaultDescription
clearable
boolean | undefinedfalseWhen true, shows a clear button.
defaultValue
Date | null | undefined—Uncontrolled initial value.
disabled
boolean | undefined—
error
string | undefined—Validation error text.
firstDayOfWeek
0 | 1 | undefined1First day of week: 0 = Sunday, 1 = Monday.
label
string | undefined—Label rendered ALL-CAPS above the input.
maxDate
Date | undefined—Maximum selectable date (inclusive).
minDate
Date | undefined—Minimum selectable date (inclusive).
onChange
((date: Date | null) => void) | undefined—Called when the selected date changes.
placeholder
string | undefined—
value
Date | null | undefined—Controlled value.
valueFormat
string | undefined"MMM d, yyyy"date-fns format string for the display input.
← All ComponentsGetting Started →