Date & Time Component

DatePicker

Custom popup calendar — single, datetime, and range modes. In time mode the time part is a compact stepper (1-min steps by default; set step / seconds).

Single date

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

2026-08-08

Date + time

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

2026-08-08T09:30

Range

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

2026-08-06 → 2026-08-12

import { DatePicker } from 'svelte-ui';

let single = $state('2026-08-08');                          // 'YYYY-MM-DD'
let dt = $state('2026-08-08T09:30');                        // 'YYYY-MM-DDTHH:MM'
let range = $state({ start: '2026-08-06', end: '2026-08-12' });

<DatePicker bind:value={single} />
<DatePicker time bind:value={dt} />         <!-- time steps 1 min by default; set step / seconds -->
<DatePicker range bind:value={range} />

TimePicker

Input-framed trigger → a themed popup (no native time popup): a compact iOS-style stepper. meridiem toggles 12h / 24h (24h drops AM/PM); step is the minute interval or a per-column hour/minute/second object; min/max bound it; seconds adds a seconds column.

1-min (default)

09:30

24h (no AM/PM), 15-min

14:00

24h · 09:00–17:00 bounds

—

seconds · per-column step

09:30:15

import { TimePicker } from 'svelte-ui';

let t1 = $state('09:30');      // 24h 'HH:MM'
let t2 = $state('14:00');
let t3 = $state('');
let ts = $state('09:30:15');   // 'HH:MM:SS' with seconds

<TimePicker bind:value={t1} />                          <!-- 1-min, 12h -->
<TimePicker bind:value={t2} meridiem={false} step={15} />  <!-- 24h -->
<TimePicker bind:value={t3} meridiem={false} min="09:00" max="17:00" />
<TimePicker seconds step={{ minute: 5, second: 15 }} bind:value={ts} />

TimeRangeInput

A time interval — two compact steppers (Start / End) in one popup, cross-bounded so End can't precede Start.

seeded

Start

End

09:00 → 17:00

empty

Start

End

— → —

import { TimeRangeInput } from 'svelte-ui';

let tr = $state({ start: '09:00', end: '17:00' });   // 24h 'HH:MM'
let trEmpty = $state({ start: null, end: null });

<TimeRangeInput bind:value={tr} />
<TimeRangeInput bind:value={trEmpty} />

Variants

The variant accents the selection, actions, and focus in the popup.

success

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

danger

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

warning

let vDate = $state('2026-08-08');
let vTime = $state('13:30');

<DatePicker variant="success" bind:value={vDate} />
<DatePicker variant="danger" range value={{ start: '2026-08-06', end: '2026-08-12' }} />
<TimePicker variant="warning" bind:value={vTime} />

DateTimeInput

Wraps the native control so the field matches every other Input (frame/height/border); the popup is the browser's. type selects the picker.

datetime-local

2026-08-08T09:30

date

2026-08-08

time

09:30

import { DateTimeInput } from 'svelte-ui';

let nativeDt = $state('2026-08-08T09:30');
let nativeDate = $state('2026-08-08');
let nativeTime = $state('09:30');

<DateTimeInput bind:value={nativeDt} />              <!-- datetime-local (default) -->
<DateTimeInput type="date" bind:value={nativeDate} />
<DateTimeInput type="time" bind:value={nativeTime} />

Sizes

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

<DatePicker size="sm" value="2026-08-08" />
<DatePicker size="md" value="2026-08-08" />
<DatePicker size="lg" value="2026-08-08" />