Date Picker и Calendar

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

Основы Date Picker

Date Picker — это интерактивный компонент, который позволяет пользователю выбрать дату из календаря или ввести её вручную в текстовом поле. В SvelteKit реализация Date Picker обычно строится на базе сторонних UI-библиотек, таких как svelte-datepicker, svelte-calendar или UI-фреймворков вроде Flowbite Svelte.

Основные свойства Date Picker:
  • value — текущее значение даты (тип Date или строка в ISO формате).
  • min и max — ограничение диапазона доступных для выбора дат.
  • format — формат отображения даты (например, DD/MM/YYYY).
  • placeholder — текст, показываемый до выбора даты.
  • disabled — блокировка выбора даты.

Пример базового использования:

<script>
  import DatePicker from 'svelte-datepicker';
  import 'svelte-datepicker/dist/index.css';

  let selectedDate = new Date();
</script>

<DatePicker bind:value={selectedDate} min={new Date(2023, 0, 1)} max={new Date(2025, 11, 31)} />

Здесь bind:value обеспечивает двустороннюю привязку, позволяя компоненту автоматически обновлять переменную selectedDate при выборе даты.

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

Для многих приложений необходимо выбрать период, а не одну дату. Date Picker поддерживает выбор диапазона:

<script>
  import DatePicker from 'svelte-datepicker';
  let range = { start: null, end: null };
</script>

<DatePicker bind:range={range} range selectRange />
  • selectRange активирует режим выбора интервала.
  • range.start и range.end — объекты типа Date, которые содержат выбранные начальную и конечную даты.

Дополнительно можно настроить календарь с выделением диапазона, используя кастомные стили через class или style.

Календарь (Calendar) как компонент

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

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

  • currentMonth — отображаемый месяц (тип Date).
  • selectedDate — выбранная дата.
  • events — массив объектов событий с ключами date и title.
  • on:select — событие выбора даты.

Пример с событиями:

<script>
  import Calendar from 'svelte-calendar';
  
  let selectedDate = new Date();
  const events = [
    { date: new Date(2026, 2, 25), title: 'Событие 1' },
    { date: new Date(2026, 2, 27), title: 'Событие 2' }
  ];
</script>

<Calendar {selectedDate} {events} on:select={(e) => selectedDate = e.detail} />

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

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

Date Picker и Calendar легко интегрируются с формами, в том числе с SvelteKit Form Actions. Двусторонняя привязка позволяет отправлять выбранные даты без дополнительного преобразования:

<form method="POST">
  <DatePicker name="appointment" bind:value={selectedDate} />
  <button type="submit">Записаться</button>
</form>

При этом selectedDate автоматически передается на сервер в формате ISO, который удобно обрабатывать в API.

Кастомизация и стилизация

  • Темы и CSS-переменные: большинство Svelte UI-библиотек позволяют менять цвета, шрифты и размеры календаря через CSS-переменные или Tailwind-классы.
  • События клика и hover: можно добавлять пользовательские обработчики на каждую дату, создавая интерактивные элементы.
  • Локализация: поддержка разных языков и форматов даты через свойства locale и format.

Пример локализации:

<DatePicker bind:value={selectedDate} locale="ru" format="DD.MM.YYYY" />

Оптимизация производительности

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

  • Использовать виртуализацию дней в календаре, чтобы не рендерить все месяцы сразу.
  • Хранить события в Map по дате для быстрого поиска и фильтрации.
  • Разделять компоненты: один для выбора даты, другой — для отображения событий.

Дополнительные возможности

  • Выбор времени (DateTime Picker): комбинированные компоненты с выбором даты и времени.
  • Множественный выбор дат: позволяет выбрать несколько несмежных дат.
  • Поддержка клавиатурной навигации: стрелки для перемещения по календарю, Enter для выбора даты.

Эти функции делают Date Picker и Calendar универсальными инструментами для сложных интерфейсов планирования и работы с расписаниями.

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

Оглавление