Skip to content
CodeAtlas UI

Inputs

Date and time

DatePicker, DateRangePicker, DateField, TimeField, Calendar and RangeCalendar, fully keyboard operable.

<script>
  import { DatePicker, CalendarDate } from "@codeatlasdev/ui";
  let date = $state(new CalendarDate(2026, 10, 10));
</script>

<DatePicker label="Delivery date" bind:value={date} />

Values are @internationalized/date objects. CalendarDate, Time, today, getLocalTimeZone and the DateValue, DateRange and TimeValue types are re-exported from @codeatlasdev/ui, so you do not need that package as a direct dependency.

The default locale is pt-BR with Monday-first weeks. The demos below pass locale="en-US" and weekStartsOn={0} to show the English format.

Keyboard. In field segments, type digits or use the up and down arrows to change a value, and the left and right arrows or Tab to move between segments. In a calendar, the arrows move by day, PageUp and PageDown by month, Shift with PageUp or PageDown by year, Home and End to the week edges, Enter or Space selects, and Escape closes the popover.

An error is rendered with role="alert" and sets aria-invalid and aria-describedby. Clicking a field label focuses its first segment.

DatePicker and DateRangePicker

Editable segments plus a calendar popover. The range picker shows two months.

Delivery date
mmddyyyy

Type a date or pick one from the calendar.

value: –

Period

start: – · end: –

Code
svelte 
<script lang="ts">
  import { DatePicker, DateRangePicker, type DateRange, type DateValue } from '@codeatlasdev/ui';

  let picked = $state<DateValue | undefined>();
  let range = $state<DateRange>({ start: undefined, end: undefined });

  const fmt = (d: DateValue | undefined) => (d ? d.toString() : '–');
</script>

<div class="col">
  <DatePicker
    label="Delivery date"
    description="Type a date or pick one from the calendar."
    locale="en-US"
    weekStartsOn={0}
    bind:value={picked}
  />
  <p class="out">value: <code>{fmt(picked)}</code></p>
</div>

<div class="col col--wide">
  <DateRangePicker label="Period" locale="en-US" weekStartsOn={0} bind:value={range} />
  <p class="out">start: <code>{fmt(range.start)}</code> · end: <code>{fmt(range.end)}</code></p>
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 400px;
  }

  .col--wide {
    max-width: 460px;
  }

  .out {
    margin: 0;
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
  }
</style>

DateField and TimeField

Segments only, no popover. granularity="minute" adds a time, and hourCycle switches between 12h and 24h.

Birthday
10102026
Starts at
mmddyyyy––––AM

value: 2026-10-10

Time (24h)
1430
Time (12h)
––––AM

value: 14:30:00

Code
svelte 
<script lang="ts">
  import { CalendarDate, DateField, Time, TimeField, type DateValue } from '@codeatlasdev/ui';

  let birthday = $state<DateValue | undefined>(new CalendarDate(2026, 10, 10));
  let time = $state<Time | undefined>(new Time(14, 30));
</script>

<div class="col">
  <DateField label="Birthday" locale="en-US" bind:value={birthday} />
  <DateField label="Starts at" locale="en-US" granularity="minute" />
  <p class="out">value: <code>{birthday ? birthday.toString() : '–'}</code></p>
  <TimeField label="Time (24h)" locale="en-US" hourCycle={24} bind:value={time} />
  <TimeField label="Time (12h)" locale="en-US" hourCycle={12} />
  <p class="out">value: <code>{time ? time.toString() : '–'}</code></p>
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 400px;
  }

  .out {
    margin: 0;
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
  }
</style>

Calendar and RangeCalendar

Inline calendars. Click a start date, then an end date for the range.

SunMonTueWedThuFriSat
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

value: 2026-10-13

SunMonTueWedThuFriSat
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

start: – · end: –

Code
svelte 
<script lang="ts">
  import {
    Calendar,
    RangeCalendar,
    getLocalTimeZone,
    today,
    type DateRange,
    type DateValue,
  } from '@codeatlasdev/ui';

  let value = $state<DateValue | undefined>(today(getLocalTimeZone()));
  let range = $state<DateRange>({ start: undefined, end: undefined });

  const fmt = (d: DateValue | undefined) => (d ? d.toString() : '–');
</script>

<div class="stack">
  <Calendar bind:value label="Event date" locale="en-US" weekStartsOn={0} />
  <p class="out">value: <code>{fmt(value)}</code></p>
</div>

<div class="stack">
  <RangeCalendar bind:value={range} label="Stay" locale="en-US" weekStartsOn={0} numberOfMonths={1} />
  <p class="out">start: <code>{fmt(range.start)}</code> · end: <code>{fmt(range.end)}</code></p>
</div>

<style>
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-3);
  }

  .out {
    margin: 0;
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
  }
</style>

Min, max, error and disabled

Only the next 30 days are selectable. Out-of-range days are disabled and typed values become invalid.

Schedule for
mmddyyyy

Only the next 30 days.

Date of birth
mmddyyyy
Disabled
01152026
Read-only
0900AM
Code
svelte 
<script lang="ts">
  import {
    CalendarDate,
    DateField,
    DatePicker,
    Time,
    TimeField,
    getLocalTimeZone,
    today,
    type DateValue,
  } from '@codeatlasdev/ui';

  const tz = getLocalTimeZone();
  const min = today(tz);
  const max = today(tz).add({ days: 30 });

  let bounded = $state<DateValue | undefined>();
  let required = $state<DateValue | undefined>();
  const requiredError = $derived(required ? undefined : 'Enter your date of birth.');
</script>

<div class="col">
  <DatePicker label="Schedule for" description="Only the next 30 days." locale="en-US" weekStartsOn={0} minValue={min} maxValue={max} bind:value={bounded} />
  <DatePicker label="Date of birth" locale="en-US" weekStartsOn={0} required error={requiredError} bind:value={required} />
  <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)} />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 400px;
  }
</style>

Shared props

PropTypeDefaultDescription
labelstring–Field label. On Calendar and RangeCalendar it is the screen-reader label.
descriptionstring–Hint below the field (aria-describedby). Pickers and fields only.
errorstring–Error message (role="alert"). Sets aria-invalid and the error style. Pickers and fields only.
disabledbooleanfalseDisables the field and popover.
readonlybooleanfalseShows the value without allowing edits.
requiredbooleanfalseMarks the field as required. Pickers and fields only.
valueDateValue | DateRange | Time–Bindable. DateValue for DatePicker, DateField and Calendar, DateRange for the range components, Time for TimeField.
placeholderDateValue | TimeValue–Bindable. Controls the visible month, or the starting point of an empty field.
localestring'pt-BR'Intl locale for segments, month and weekday names.
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 61First day of the week (0 is Sunday). Calendars and pickers.
minValueDateValue–Lower bound. Out-of-range days are disabled and typed values become invalid.
maxValueDateValue–Upper bound.
granularity'day' | 'hour' | 'minute' | 'second''day' (TimeField: 'minute')Which segments are shown. TimeField accepts hour, minute and second.
hourCycle12 | 24–DateField and TimeField. Defaults to the locale (pt-BR is 24h).
openbooleanfalseBindable popover state. DatePicker and DateRangePicker.
numberOfMonthsnumber1 (range components: 2)Months shown side by side.
fixedWeeksbooleanfalseAlways render six weeks. Calendar and RangeCalendar.
isDateDisabled(d: DateValue) => boolean–Disables matching dates. Calendars and pickers.
isDateUnavailable(d: DateValue) => boolean–Marks matching dates as unavailable. Calendars and pickers.
closeOnDateSelectbooleantrueDatePicker: close the popover after picking a date.
closeOnRangeSelectbooleantrueDateRangePicker: close the popover once the range is complete.
size'sm' | 'md''md'Field height. Pickers and fields.
namestring–Name of the hidden input (ISO string) for native forms. DatePicker, DateField and TimeField.
triggerLabelstring'Open calendar' (localized)aria-label of the calendar button. Pickers.
classstring–Extra classes on the root.
onchange(value) => void–Called when the value changes. Receives DateValue | undefined, DateRange or Time | undefined depending on the component.