Range Calendar

Range Calendar — компонент, предназначенный для выбора диапазона дат в веб-приложениях. Он позволяет пользователю выбрать начальную и конечную дату в одном интерактивном интерфейсе. В SvelteKit UI библиотеках чаще всего используется сочетание реактивных переменных, двусторонней привязки и событийных обработчиков для управления состоянием календаря.

Подключение и установка

Для использования Range Calendar необходимо убедиться, что библиотека компонентов установлена. Обычно это делается через npm или yarn:

npm install @sveltekit/ui

или

yarn add @sveltekit/ui

Импорт компонента в SvelteKit выглядит так:

<script>
  import { RangeCalendar } from '@sveltekit/ui';
  import { writable } from 'svelte/store';

  const selectedRange = writable({ start: null, end: null });
</script>

Основные свойства

  1. value / bind:value Используется для двусторонней привязки выбранного диапазона. Обычно это объект с полями start и end.

    <RangeCalendar bind:value={selectedRange} />

  2. min / max Ограничивают выбор дат конкретным диапазоном.

    <RangeCalendar bind:value={selectedRange} min={new Date(2024, 0, 1)} max={new Date(2024, 11, 31)} />

  3. disabledDates Массив дат, которые нельзя выбрать. Может принимать массив объектов Date или функции для динамической блокировки.

    <RangeCalendar
  bind:value={selectedRange}
  {disabledDates}
/>

<script>
  const disabledDates = [new Date(2024, 1, 14), new Date(2024, 1, 15)];
</script>

  4. locale Позволяет локализовать календарь. Поддерживаются стандартные языковые коды, например "ru" для русского.

    <RangeCalendar bind:value={selectedRange} locale="ru" />

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

on:change — основное событие, которое вызывается при изменении диапазона.

<RangeCalendar bind:value={selectedRange} on:change={handleChange} />

<script>
  function handleChange(event) {
    console.log('Выбран диапазон:', event.detail);
  }
</script>

Событие возвращает объект { start: Date, end: Date }, что позволяет мгновенно реагировать на действия пользователя, например, обновлять список доступных событий или фильтровать данные на странице.

Кастомизация внешнего вида

Range Calendar в SvelteKit UI поддерживает темизацию и кастомные стили через CSS-переменные и классы:

  • –calendar-bg — фон календаря
  • –calendar-text-color — цвет текста
  • –calendar-selected-bg — фон выбранных дат

Пример кастомизации:

:global(.range-calendar) {
  --calendar-bg: #f5f5f5;
  --calendar-text-color: #333;
  --calendar-selected-bg: #007aff;
}

Интеграция с формами

Range Calendar удобно использовать в формах с валидацией, комбинируя его с SvelteKit формами:

<form on:submit|preventDefault={submitForm}>
  <RangeCalendar bind:value={selectedRange} required />
  <button type="submit">Отправить</button>
</form>

<script>
  function submitForm() {
    console.log('Диапазон для отправки:', $selectedRange);
  }
</script>

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

Пример расширенной функциональности

Можно добавить выбор быстрых диапазонов — кнопки для выбора “Сегодня”, “Неделя”, “Месяц”:

<script>
  function setRange(range) {
    selectedRange.set(range);
  }
</script>

<div class="quick-ranges">
  <button on:click={() => setRange({ start: new Date(), end: new Date() })}>Сегодня</button>
  <button on:click={() => setRange({ start: new Date(Date.now() - 7*24*60*60*1000), end: new Date() })}>Неделя</button>
  <button on:click={() => setRange({ start: new Date(new Date().getFullYear(), new Date().getMonth(), 1), end: new Date() })}>Месяц</button>
</div>

<RangeCalendar bind:value={selectedRange} />

Работа с реактивными переменными

SvelteKit UI компоненты полностью интегрируются с реактивностью Svelte. Любые изменения переменной selectedRange мгновенно отражаются в интерфейсе и могут использоваться для фильтрации данных, графиков или отправки на сервер.

<script>
  $: if ($selectedRange.start && $selectedRange.end) {
    console.log('Выбран диапазон:', $selectedRange);
  }
</script>

Поддержка мобильных устройств

Range Calendar адаптивен и поддерживает тач-события, что обеспечивает удобный выбор диапазона на мобильных устройствах. Для улучшения UX можно дополнительно применять touch-action: manipulation; к контейнеру календаря.

Продвинутые возможности

  • События hover: подсветка диапазона при наведении.
  • Custom render: возможность заменять стандартный рендер дней кастомными компонентами.
  • Синхронизация с другими календарями: удобно для отображения нескольких календарей одновременно, например, для выбора дат начала и окончания бронирования.

Итог

Range Calendar в SvelteKit UI — мощный инструмент для работы с диапазонами дат, с широкими возможностями кастомизации, интеграции с формами и полной реактивностью. Использование правильных свойств и событий позволяет создавать гибкие и интерактивные интерфейсы для веб-приложений.

Оглавление