#016
Min, max, error and disabled
Date and time inputs with constraints: a bounded DatePicker, a required DatePicker with an error, a disabled DateField and a read-only TimeField.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Min, max, error and disabled" pattern (@codeatlasdev/ui demo #016, inputs/date-picker) in my app.
Call get_demo({ ids: ["#016"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Forms that limit selectable dates, require a date of birth or show locked date and time values.
Keep these library parts, with the props and tokens the demo uses:
- CalendarDate, DateField, DatePicker, Time, TimeField, getLocalTimeZone, today, DateValue from "@codeatlasdev/ui"
Behaviour to keep:
- `minValue={min}` and `maxValue={max}` with `const max = today(tz).add({ days: 30 })` and `description="Only the next 30 days."`
- `required` with `error={requiredError}` derived as `'Enter your date of birth.'` while empty
- `<DateField label="Disabled" locale="en-US" disabled value={new CalendarDate(2026, 1, 15)} />`
- `<TimeField label="Read-only" locale="en-US" readonly value={new Time(9, 0)} />`
- Wrapper `.col` has `max-width: 400px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- DateField
@codeatlasdev/ui - DatePicker
@codeatlasdev/ui - TimeField
@codeatlasdev/ui
How it is built
- `minValue={min}` and `maxValue={max}` with `const max = today(tz).add({ days: 30 })` and `description="Only the next 30 days."`
- `required` with `error={requiredError}` derived as `'Enter your date of birth.'` while empty
- `<DateField label="Disabled" locale="en-US" disabled value={new CalendarDate(2026, 1, 15)} />`
- `<TimeField label="Read-only" locale="en-US" readonly value={new Time(9, 0)} />`
- Wrapper `.col` has `max-width: 400px`
Related
Loading source.