InputDateRange

Триггер открывает пресеты, два независимых календаря и, при withTime, два InputTime. Первый клик задаёт начало диапазона, второй — конец.

Статус: experimental · в системе с 2026-06 · интерактивность: always (всегда)

Когда использовать

Период для фильтра или отчёта «от — до»; типовые интервалы — пресетами.
Границы со временем — withTime добавляет THH:mm к каждой дате.

Не использовать:

Одна дата — диапазон здесь избыточен.

Альтернативы:

input-date — одна дата

Конструктор

Меняйте свойства InputDateRange, сочетайте их и проверяйте результат в одном живом экземпляре.

Базовый

range: 2024-01-01 … 2024-04-12

<script>
import InputDateRange from "$lib/ui/InputDateRange.svelte";

let start = $state("2024-01-01");
let end = $state("2024-04-12");
</script>

<div style="display: grid; gap: var(--sp-1); width: 360px;">
  <InputDateRange label="Date" required bind:start bind:end />
  <p style="margin: 0; font-size: var(--fs-s);">range: <code>{start || "—"} … {end || "—"}</code></p>
</div>

Пустой

<script>
import InputDateRange from "$lib/ui/InputDateRange.svelte";
</script>

<div style="width: 360px;">
  <InputDateRange label="Date" />
</div>

Границы

min и max закрывают даты вне допустимого окна на обоих календарях.

<!--
  🟢

  Границы диапазона (эталон: Vue-легаси daterange minLimitDate /
  maxLimitDate): даты вне окна закрыты на обоих календарях.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import InputDateRange from "$lib/ui/InputDateRange.svelte";

let start = $state("2026-09-01");
let end = $state("2026-09-07");
</script>

<div style="width: 320px;">
	<InputDateRange label={t("Период отчёта")} bind:start bind:end min="2026-08-15" max="2026-09-30" withTime={false} />
</div>