#015
Calendar and RangeCalendar
An inline single-date Calendar and a RangeCalendar, each printing its selected value below.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Calendar and RangeCalendar" pattern (@codeatlasdev/ui demo #015, inputs/date-picker) in my app.
Call get_demo({ ids: ["#015"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Always-visible date selection such as booking a stay or choosing an event day without a popover.
Keep these library parts, with the props and tokens the demo uses:
- Calendar, RangeCalendar, getLocalTimeZone, today, DateRange, DateValue from "@codeatlasdev/ui"
Behaviour to keep:
- `<Calendar bind:value label="Event date" locale="en-US" weekStartsOn={0} />`
- `let value = $state<DateValue | undefined>(today(getLocalTimeZone()))` preselects today
- `<RangeCalendar bind:value={range} label="Stay" locale="en-US" weekStartsOn={0} numberOfMonths={1} />`
- `let range = $state<DateRange>({ start: undefined, end: undefined })` starts empty
- Output lines show `fmt(value)`, `fmt(range.start)` and `fmt(range.end)`, with `–` when unset
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
- Calendar
@codeatlasdev/ui - RangeCalendar
@codeatlasdev/ui
How it is built
- `<Calendar bind:value label="Event date" locale="en-US" weekStartsOn={0} />`
- `let value = $state<DateValue | undefined>(today(getLocalTimeZone()))` preselects today
- `<RangeCalendar bind:value={range} label="Stay" locale="en-US" weekStartsOn={0} numberOfMonths={1} />`
- `let range = $state<DateRange>({ start: undefined, end: undefined })` starts empty
- Output lines show `fmt(value)`, `fmt(range.start)` and `fmt(range.end)`, with `–` when unset
Related
Loading source.