Диапазоны дат

Диапазоны дат в интерфейсах часто используются для выбора периода времени, фильтрации данных или отображения отчетов. В библиотеке Carbon Components Svelte работа с диапазонами реализована через компонент DatePicker с поддержкой диапазонов.

Использование компонента DatePicker с режимом диапазона

Для создания диапазона дат необходимо использовать проп range:

<script>
  import { DatePicker } from 'carbon-components-svelte';
  let selectedRange = { start: '', end: '' };
</script>

<DatePicker
  range={true}
  bind:value={selectedRange}
  id="example-date-range"
  dateFormat="m/d/Y"
  placeholder="Выберите диапазон дат"
/>
  • range={true} — активирует режим выбора диапазона.
  • bind:value — связывает выбранный диапазон с переменной. В этом случае объект selectedRange имеет поля start и end.
  • dateFormat — формат отображения даты. Поддерживаются стандартные форматы Carbon: "m/d/Y", "Y-m-d" и др.
  • placeholder — отображаемый текст при пустом поле.

Структура значения диапазона

После выбора пользователем дат переменная selectedRange имеет следующий вид:

{
  start: '2026-03-01',
  end: '2026-03-15'
}

Это позволяет напрямую использовать данные для фильтрации массивов, запросов к серверу или других вычислений.

Ограничение диапазона дат

Можно задать минимальную и максимальную даты с помощью свойств minDate и maxDate:

<DatePicker
  range={true}
  bind:value={selectedRange}
  minDate="2026-01-01"
  maxDate="2026-12-31"
/>
  • minDate — самая ранняя допустимая дата.
  • maxDate — самая поздняя допустимая дата.

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

Настройка пользовательского формата даты

Помимо стандартного формата, можно настроить отображение даты с помощью пропа dateFormat:

<DatePicker
  range={true}
  bind:value={selectedRange}
  dateFormat="d.m.Y"
/>

Это особенно полезно при локализации интерфейса, например, для России чаще используется формат дд.мм.гггг.

Обработка событий выбора

Компонент DatePicker поддерживает события change и blur, что позволяет реагировать на выбор диапазона:

<DatePicker
  range={true}
  bind:value={selectedRange}
  on:change={(event) => {
    console.log('Выбран диапазон:', event.detail);
  }}
/>
  • on:change срабатывает после изменения диапазона дат.
  • event.detail содержит объект с полями start и end.

Стилизация и интеграция с Carbon

Диапазон дат наследует все стили Carbon и может быть встроен в формы, карточки и модальные окна без дополнительных настроек. Важно правильно использовать классы Carbon для выравнивания и адаптивности:

<div class="bx--form-item">
  <label for="example-date-range" class="bx--label">Период отчета</label>
  <DatePicker
    id="example-date-range"
    range={true}
    bind:value={selectedRange}
  />
</div>
  • bx–form-item — контейнер для корректного отображения поля с меткой.
  • bx–label — стиль метки Carbon.

Предварительное заполнение диапазона

Можно задавать начальное значение диапазона при инициализации:

let selectedRange = {
  start: '2026-03-01',
  end: '2026-03-10'
};

Поле автоматически отобразит выбранные даты при рендере компонента.

Работа с динамическими диапазонами

Иногда необходимо программно менять диапазон в зависимости от действий пользователя:

function setLastWeek() {
  const today = new Date();
  const lastWeek = new Date();
  lastWeek.setDate(today.getDate() - 7);
  
  selectedRange = {
    start: lastWeek.toISOString().split('T')[0],
    end: today.toISOString().split('T')[0]
  };
}

Это удобно для кнопок типа “Последняя неделя”, “Последний месяц” и аналогичных фильтров.

Совместное использование с другими компонентами

Диапазон дат часто комбинируется с таблицами, графиками и фильтрами:

<DataTable {rows} {headers} {selectedRange} />

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

Диапазоны дат в Carbon Components Svelte обеспечивают удобное и гибкое управление периодами времени, поддерживают привязку к переменным, ограничения по дате, события изменения и интеграцию с остальными компонентами Carbon. Их можно полностью адаптировать под конкретные задачи интерфейса, от простых форм до сложных аналитических панелей.

Оглавление