InputDate

Триггер хранит дату в формате YYYY-MM-DD и открывает месячный календарь Bits UI.

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

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

Одна дата: дедлайн, дата публикации, старт кампании.
Значение уходит в форму или API как ISO YYYY-MM-DD.

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

Диапазон «от — до».
Дата далеко от текущей (год рождения) — листать календарь дольше, чем ввести текстом.

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

input-date-range — диапазон дат с пресетами
input — текстовый ввод далёкой даты

Конструктор

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

Базовый

value: 1984-01-01

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

let value = $state("1984-01-01");
</script>

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

Пустое и со значением

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

<div style="width: 280px;">
  <InputDate label="Date" />
</div>

<div style="width: 280px;">
  <InputDate label="Date" value="2024-03-15" />
</div>

Размер s

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

<div style="width: 280px;">
  <InputDate label="Date" size="s" value="2024-03-15" />
</div>