Date input

Type a date or choose one from a calendar.

Preview

Default

Design guidance

Use Date input for a known date that is faster to type, or a relative date such as tomorrow. Use Date picker when the calendar is the primary control. Both use the same date selection owner and ISO date-only contract.

Numeric typing follows one configured order. It never guesses whether an ambiguous date means month/day or day/month. Invalid text stays visible for correction. Natural-language entry supports a small English vocabulary; use parseDate for another language or application terms.

Installation

Install

No source.

Download example files — JSX recipes, demo styles and any sample assets. Install the component first.

Basic usage

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

<DateInput label="Due date" name="due-date" />

Structures

DateInput is a convenience composition of canonical Field/InputGroup, IconButton, Popover and DatePicker owners. Use inputProps to pass supported native input attributes to the text control. Draft text can be incomplete or invalid; committed form values use ISO date strings (or the start/end ISO pair in range mode).

Examples

Typing and parsing

Natural language

Type today, yesterday, tomorrow, next week, last week, in 3 days, in 2 weeks, or next Monday. Enter or blur resolves a valid phrase to the numeric display. These examples fix referenceDate to 20 October 2026; omit it to use the local date at commit time.

Custom parsing

Add a caller-owned term without replacing calendar selection or numeric parsing. A custom parser returns an ISO date or null; its result still passes the same date, bounds and availability validation.

Range review

Edit both endpoints or choose them in the calendar, then Apply. Cancel, Escape and dismissing the popup discard private edits. Invalid or reversed dates stay editable and cannot be applied.

Locale and format

Locale formatting

The default is day/month/year (en-GB). This example uses month/day/year. Eight compact digits and numeric typing receive the matching separators.

ISO formatting

Use an explicit format when your application needs year/month/day entry. Stored values always use ISO, regardless of display format.

Label placement

IFTA placement

Use the persistent label inside the existing Field surface.

States

Read only

Disabled

API reference

Date input properties
Prop	Type	Default	Description
`value / defaultValue / onValueChange`	`DateInputValue / (value: DateInputValue) => void`		ISO date-only string, { start, end }, or null for single/range text entry. Only valid committed changes emit. Use DatePicker multiple mode for independent date arrays.
`mode`	`single \| range`	`single`	One date field or two endpoints with a shared calendar.
`label / fieldPlacement`	`ReactNode / top \| ifta \| left \| placeholder`		Caller-owned Field label and placement. Default top; IFTA keeps its persistent label.
`dateFormat`	`locale \| DD/MM/YYYY \| MM/DD/YYYY \| YYYY-MM-DD`	`locale`	Mask, placeholder, display and strict numeric parsing use the same order.
`locale`	`string`	`en-GB`	Numeric Gregorian order/separators and calendar labels. Does not translate the English parser.
`naturalLanguage`	`boolean`	`true`	Enable the documented bounded English phrases. False keeps numeric entry.
`referenceDate`	`string`		Optional ISO reference for relative phrases; otherwise local today at commit time.
`parseDate`	`(text, context) => string \| null`		Optional custom date parser. Returned values must be valid ISO dates. Errors or unsupported text remain invalid.
`commitMode`	`immediate \| explicit`		Immediate for single by default; explicit for range. Typed explicit drafts require Apply.
`display`	`popover \| inline`	`popover`	Trailing calendar popover or an inline field-and-calendar composition.
`min / max / isDateDisabled`	`string / string / (date: string) => boolean`		Shared calendar and typed-entry constraints.
`disabled / readOnly / invalid`	`boolean`	`false`	Interaction and validation state. Read only preserves the submitted value.
`numberOfMonths`	`1 \| 2`		One for single by default, two for range; narrow calendars show one month.
`onValidityChange`	`(valid: boolean) => void`		Current draft validity for an outer form.
`name`	`string`		Committed ISO form fields. Ranges use name-start and name-end.
`open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`		Controlled or initial popover state and changes.
`placeholder / inputProps`	`string / native input properties`		Field prompt and native input attributes. Value and parsing remain component-owned.
`className / ref`	`string / React.Ref<HTMLDivElement>`		Root layout escape and root ref.

parseDisplayDate and formatDisplayDate remain strict numeric helpers. parseDateInput is the separate helper for numeric and natural-language entry. Neither uses timezone-dependent string date parsing.

Migration: replace field-based DatePicker usage with DateInput. Replace showInput inline compositions with DateInput display="inline". The calendar-only DatePicker remains available for custom overlays and Booking.

Due date