DateInput
v1.0.5Updated 28 Sept 2026Keyboard-first `DD/MM/YYYY` date field with real range constraints — day 1-31 and month 1-12 are enforced by the mask, so `99/99/9999` can never be typed. `autofix: 'pad'` pads a leading `9` to `09` instead of rejecting the keystroke. Use it when typing a date is faster than picking one; reach for DatePicker when a calendar popover is wanted.
Preview
Live · 5 stories▸Why this is recommendedformmaskinputdate+3
DateInput — constrained date.
- ✓Date of birth entry
- ✓Typing a date without opening a calendar
- ✓From/to date filters in a filter bar
- ✓Company registration or issue date fields
- ✓Fast keyboard date entry on data-heavy admin forms
- `DD/MM/YYYY` mask with MaskedRange day 1-31 and month 1-12
- autofix 'pad' turns a leading 9 into 09 rather than rejecting it
- inputMode="numeric" + autoComplete="bday" for autofill
- Monospace tabular-nums so digits do not jitter while typing
- No calendar dependency — far lighter than DatePicker
- Sanitised masked value via onAccept
- i18n: day/month/year order + separator follow the app LocaleProvider locale via Intl (base "en" keeps the shipped DD/MM/YYYY)
- ✕Picking a date from a calendar (use DatePicker)
- ✕Selecting a date range with a calendar (use DateRangePicker)
- ✕Buddhist Era calendars (use DatePicker)
- ✕Date + time together (use DateTimePicker)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
valueCurrent masked date, e.g. '12/03/1998'
—onAcceptFires whenever the masked value changes
—onCompleteFires when the full date is entered
—aria-invalidRenders the destructive border and ring
—disabledDisables the field; the value stays masked
—