DatePicker and DateRangePicker

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "DatePicker and DateRangePicker" pattern (@codeatlasdev/ui demo #018, inputs/date-picker) in my app.

Call get_demo({ ids: ["#018"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing a delivery date or a reporting period where the user can type or pick from a calendar popover.

Keep these library parts, with the props and tokens the demo uses:
- DatePicker, DateRangePicker, DateRange, DateValue from "@codeatlasdev/ui"

Behaviour to keep:
- `<DatePicker` with `label="Delivery date"` and `description="Type a date or pick one from the calendar."`
- `bind:value={picked}` with `let picked = $state<DateValue | undefined>()`
- `<DateRangePicker label="Period" locale="en-US" weekStartsOn={0} bind:value={range} />`
- `let range = $state<DateRange>({ start: undefined, end: undefined })`
- Wrappers: `.col` has `max-width: 400px`, `.col--wide` has `max-width: 460px`

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

• DatePicker @codeatlasdev/ui
• DateRangePicker @codeatlasdev/ui

How it is built

• `<DatePicker` with `label="Delivery date"` and `description="Type a date or pick one from the calendar."`
• `bind:value={picked}` with `let picked = $state<DateValue | undefined>()`
• `<DateRangePicker label="Period" locale="en-US" weekStartsOn={0} bind:value={range} />`
• `let range = $state<DateRange>({ start: undefined, end: undefined })`
• Wrappers: `.col` has `max-width: 400px`, `.col--wide` has `max-width: 460px`

Related

• #015 Calendar and RangeCalendar component/input
• #016 Min, max, error and disabled component/input
• #017 DateField and TimeField component/input
• #001 Full width component/input
• #002 With icons component/input
• #003 Loading component/input