#017
DateField and TimeField
Segmented DateField and TimeField inputs with bound values, minute granularity and 24h and 12h hour cycles.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "DateField and TimeField" pattern (@codeatlasdev/ui demo #017, inputs/date-picker) in my app.
Call get_demo({ ids: ["#017"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Typing a date or time directly in a form, such as a birthday or an appointment start time.
Keep these library parts, with the props and tokens the demo uses:
- CalendarDate, DateField, Time, TimeField, DateValue from "@codeatlasdev/ui"
Behaviour to keep:
- `<DateField label="Birthday" locale="en-US" bind:value={birthday} />` initialised with `new CalendarDate(2026, 10, 10)`
- `<DateField label="Starts at" locale="en-US" granularity="minute" />`
- `<TimeField label="Time (24h)" locale="en-US" hourCycle={24} bind:value={time} />` initialised with `new Time(14, 30)`
- `<TimeField label="Time (12h)" locale="en-US" hourCycle={12} />`
- Two `value:` output lines print `birthday.toString()` and `time.toString()`
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 - TimeField
@codeatlasdev/ui
How it is built
- `<DateField label="Birthday" locale="en-US" bind:value={birthday} />` initialised with `new CalendarDate(2026, 10, 10)`
- `<DateField label="Starts at" locale="en-US" granularity="minute" />`
- `<TimeField label="Time (24h)" locale="en-US" hourCycle={24} bind:value={time} />` initialised with `new Time(14, 30)`
- `<TimeField label="Time (12h)" locale="en-US" hourCycle={12} />`
- Two `value:` output lines print `birthday.toString()` and `time.toString()`
Related
Loading source.