InputDate

Apollion's date field. Combines the Input with a Calendar popover anchored via @floating-ui/react. Replaces the old native <input type="date"> — identical visuals in Chrome, Firefox, and Safari Desktop.

When to use

✅ Use when…	🚫 Avoid when…
Collecting a simple date in a form. You need visual consistency across browsers (Safari Desktop included). You need a custom locale, disabled dates (e.g. weekends), or min/max bounds.	When the field also needs a time — open an issue in the ROADMAP for `InputDateTime`. To select a date range — use `Calendar` inline in `range` mode inside your own popover/UI.

Format

The value is always ISO yyyy-MM-dd. The display is formatted via date-fns according to displayFormat (default dd/MM/yyyy) and locale (default ptBR). This guarantees the serialized state stays stable while the user sees the appropriate local form.

Controlled

Click to open the popover; select a date.

const [value, setValue] = useState('2024-01-01');
 
<InputDate value={value} onChange={(e) => setValue(e.target.value)} />;

Drop-in compatible with the historical signature — onChange receives a synthetic event whose target.value is the selected ISO string.

Clean signature

Same demo, now with onValueChange (no synthetic event).

<InputDate value={value} onValueChange={setValue} />

onValueChange receives the ISO string directly. Preferred in new code.

Locale + displayFormat

pt-BR (default, dd/MM/yyyy)

en-US (MM/dd/yyyy)

import { enUS } from 'date-fns/locale';
 
<InputDate value={value} onValueChange={setValue} locale={enUS} displayFormat="MM/dd/yyyy" />;

Restrictions

Weekends disabled

<InputDate value={value} onValueChange={setValue} minDate={new Date()} />
 
<InputDate
  value={value}
  onValueChange={setValue}
  disabledDates={{ dayOfWeek: [0, 6] }}
/>

minDate/maxDate are shortcuts. disabledDates accepts the full react-day-picker Matcher.

Using with `Form`

import { isValid, parse, format } from 'date-fns';
import { z } from 'zod';
 
<Form
  initialValues={{ birthDay: format(new Date(), 'yyyy-MM-dd') }}
  fields={{
    birthDay: {
      label: 'Birth Date',
      component: InputDate,
      validation: z
        .string()
        .min(1, 'Required')
        .refine((d) => isValid(parse(d, 'yyyy-MM-dd', new Date())), {
          message: 'Enter a valid date',
        }),
    },
  }}
/>;

Gotchas

InputDate is controlled-only — the display is derived from value. It does not accept defaultValue; for an initial value, seed a useState with the ISO string instead.

Properties


Prop	Type	Default	Description
`clearable`	`boolean`	—	Shows a clear button ("×" icon) when there is a value. Requires `reset` to work outside a `Form`.
`disabledDates`	`Matcher \| Matcher[]`	—	Restriction of dates that cannot be selected. Accepts the `react-day-picker` `Matcher` (Date, DateRange, function, or array).
`displayFormat`	`string`	`dd/MM/yyyy`	`date-fns` format used to display the date in the input. Does not affect the `value` (which stays ISO).
`icon`	`any`	—	React element rendered inside the input (usually an `<Icon />`). When set, the input automatically makes room to avoid collision with the typed text. @example ```tsx <Input icon={<Icon icon={search} />} iconPosition="left" /> ```
`iconPosition`	`"right" \| "left"`	`'right'`	Side on which the icon (`icon` or the clear button) is rendered.
`locale`	`Locale`	`ptBR`	`date-fns` locale used by the calendar and by the display formatting.
`maxDate`	`Date`	—	Maximum selection bound (inclusive). Shortcut for `disabledDates={{ after: maxDate }}`.
`minDate`	`Date`	—	Minimum selection bound (inclusive). Shortcut for `disabledDates={{ before: minDate }}`.
`onChange`	`((event: ChangeEvent<HTMLInputElement, Element>) => void)`	—	Callback compatible with the native `<input>` signature. Receives a synthetic event whose `target.value` is the selected ISO `yyyy-MM-dd`. Kept for drop-in compatibility with `react-hook-form`, `Field`, and existing consumers.
`onValueChange`	`((isoString: string) => void)`	—	Optional callback with the clean signature. Receives the ISO string directly. Preferred in new code that does not need the synthetic event shape.
`reset`	`(() => void)`	—	Callback invoked when the user clicks the clear button (`clearable`). Inside a `Form`, it is injected automatically; in standalone use, it must clear the controlled state.
`size`	`"expansive" \| "medium" \| "compact" \| "micro"`	`'medium'`	Size token of the input.
`value`	`string`	—	Currently selected date, in ISO `yyyy-MM-dd`. When `undefined`, the input is empty and the calendar opens on the current month. When filled, the calendar opens on the value's month.
`variant`	`"default" \| "success" \| "error"`	`'default'`	Visual variant of the input — reflects the validation state.

In addition to the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.