Input Time Range

Input Time Range связывает две строки HH:mm в один внутрисуточный интервал. Начало всегда раньше окончания: переход через полночь, секунды и 12-часовой формат в контракт не входят.

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

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

Нужно задать рабочее окно, слот или другой интервал внутри одних суток.
Начало и окончание должны редактироваться как связанные сегментные поля.
Форма хранит обе временные границы отдельно от календарной даты.

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

Нужно только одно время — используй Input Time.
Интервал может перейти через полночь — добавь календарные даты и используй диапазон даты и времени.
Пользователь задаёт длительность, а не две временные границы — используй Input Number с единицей.

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

input-time — одно точное время без связанной второй границы
input-date-range — интервал пересекает календарные даты или полночь

Базовый

Две независимые строки образуют один строгий интервал.

Рабочее время

0900

1800

Слот

1030

1115

Рабочее окно: 09:00 — 18:00

<!--
  🟢

  Базовый пример Input Time Range показывает рабочее окно и короткий слот. Начало и
  окончание связаны одним контролом, но хранятся в двух строках HH:mm.
-->

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

let workStart = $state("09:00");
let workEnd = $state("18:00");
let slotStart = $state("10:30");
let slotEnd = $state("11:15");
</script>

<div style="display: grid; gap: var(--sp-3); width: var(--control-field-min);">
	<InputTimeRange
		label={t("Рабочее время")}
		bind:start={workStart}
		bind:end={workEnd}
	/>
	<InputTimeRange label={t("Слот")} bind:start={slotStart} bind:end={slotEnd} />
	<p>{t("Рабочее окно:")} {workStart} — {workEnd}</p>
</div>

Границы

Min и max ограничивают обе границы выбранным окном суток.

Доступное окно

1000

1630

Неверный порядок

1800

0900

Время окончания должно быть позже времени начала.

<!--
  🟢

  Пример границ ограничивает обе стороны Input Time Range доступным окном. Второй
  контрол показывает встроенную ошибку строгого отношения start меньше end.
-->

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

let availableStart = $state("10:00");
let availableEnd = $state("16:30");
let invalidStart = $state("18:00");
let invalidEnd = $state("09:00");
</script>

<div style="display: grid; gap: var(--sp-3); width: var(--control-field-min);">
	<InputTimeRange
		label={t("Доступное окно")}
		min="08:00"
		max="20:00"
		bind:start={availableStart}
		bind:end={availableEnd}
	/>
	<InputTimeRange
		label={t("Неверный порядок")}
		bind:start={invalidStart}
		bind:end={invalidEnd}
	/>
</div>

Поле

Размеры, подсказка, сообщения, required и readonly для диапазона.

Линия поддержки

0900

1800

Укажите начало и окончание в пределах суток.

Период показа

––––

Укажите обе границы периода.

Тихие часы

2200

2330

<!--
  🟢

  Пример поля Input Time Range собирает подсказку, сообщения и два form-name. Ошибка
  относится ко всему интервалу, а readonly сохраняет обе границы читаемыми.
-->

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

let supportStart = $state("09:00");
let supportEnd = $state("18:00");
let missingStart = $state("");
let missingEnd = $state("");
</script>

<div style="display: grid; gap: var(--sp-3); width: var(--control-field-min);">
	<InputTimeRange
		label={t("Линия поддержки")}
		hint={t("По местному времени")}
		description={t("Укажите начало и окончание в пределах суток.")}
		startName="support-from"
		endName="support-to"
		required
		bind:start={supportStart}
		bind:end={supportEnd}
	/>
	<InputTimeRange
		label={t("Период показа")}
		error={t("Укажите обе границы периода.")}
		bind:start={missingStart}
		bind:end={missingEnd}
	/>
	<InputTimeRange
		label={t("Тихие часы")}
		start="22:00"
		end="23:30"
		size="s"
		readonly
	/>
</div>