Датапикеры и селекторы

Датапикеры (date pickers) в SvelteKit UI библиотеках обеспечивают удобный способ выбора даты или диапазона дат. На практике они реализуются как отдельные компоненты с богатым набором опций для кастомизации внешнего вида и логики. Основные возможности включают:

  • Выбор одной даты или диапазона дат
  • Настройка формата отображения даты (например, DD.MM.YYYY или YYYY-MM-DD)
  • Ограничение допустимых дат с помощью min и max
  • Интеграция с формами и валидацией

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

<script>
  import DatePicker from 'svelte-datepicker';
  let selectedDate = null;
</script>

<DatePicker bind:selectedDate format="DD.MM.YYYY" min={new Date(2023,0,1)} max={new Date(2025,11,31)} />
<p>Выбранная дата: {selectedDate}</p>

Здесь используется двусторонняя привязка bind:selectedDate, что позволяет автоматически синхронизировать состояние компонента с переменной в скрипте. Формат format задаёт визуальное представление даты, а min и max ограничивают выбор пользователя.

Расширенные возможности датапикеров

Настройка локали

Для корректного отображения месяцев и дней недели можно использовать настройку локали:

<script>
  import DatePicker from 'svelte-datepicker';
  import { ru } from 'date-fns/locale';
  let selectedDate = new Date();
</script>

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

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

Выбор диапазона дат

Диапазон дат полезен для фильтров и отчетов. Компонент может принимать объект с start и end:

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

<DatePicker bind:selectedDate={range} range={true} format="DD.MM.YYYY" />
<p>Начало: {range.start}, Конец: {range.end}</p>

В режиме range={true} компонент визуально выделяет выбранный диапазон и автоматически обновляет значения start и end.

События и кастомная логика

Датапикеры поддерживают события, которые позволяют реагировать на выбор даты:

<DatePicker 
  on:select={(e) => console.log("Выбрана дата:", e.detail)} 
/>

Событие select возвращает объект с выбранной датой, что удобно для интеграции с формами и фильтрами.

Селекторы и их разновидности

Селекторы (sel ect components) в SvelteKit позволяют пользователю выбирать один или несколько вариантов из списка. Они бывают:

  • Обычные селекторы – стандартный <select> с возможностью кастомизации
  • Многоуровневые селекторы (cascading) – выбор зависит от предыдущего выбора
  • Мультиселекторы (multi-select) – выбор нескольких значений

Пример простого селектора:

<script>
  import Select fr om 'svelte-select';
  let selectedOption = null;
  let options = [
    { value: 'apple', label: 'Яблоко' },
    { value: 'orange', label: 'Апельсин' },
    { value: 'banana', label: 'Банан' }
  ];
</script>

<Sel ect bind:value={selectedOption} {options} placeholder="Выберите фрукт" />
<p>Выбранное: {selectedOption?.label}</p>

Компонент svelte-select поддерживает двустороннюю привязку, автодополнение и кастомный рендеринг опций.

Мультиселекторы

Мультиселекторы позволяют выбирать несколько значений и возвращают массив выбранных объектов:

<Select bind:value={selectedOptions} {options} multiple={true} placeholder="Выберите фрукты" />
<p>Выбранные: {selectedOptions.map(o => o.label).join(', ')}</p>

В multiple={true} компонент автоматически управляет добавлением и удалением выбранных элементов.

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

Современные SvelteKit UI библиотеки предоставляют гибкие возможности по стилизации:

  • Настройка цвета и размера через пропсы
  • Кастомизация выпадающего списка через слоты (slots)
  • Поддержка иконок для каждой опции

Пример кастомного рендеринга опции с иконкой:

<Select {options} let:option>
  <div class="custom-option">
    <img src={`/icons/${option.value}.svg`} alt="" />
    {option.label}
  </div>
</Select>

Валидация селекторов

Селекторы легко интегрируются с формами и поддерживают валидацию:

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

<script>
  function submit() {
    if (!selectedOption) {
      alert("Выберите вариант!");
      return;
    }
    console.log("Форма отправлена:", selectedOption);
  }
</script>

Использование required и проверки значения на null обеспечивает базовую валидацию без внешних библиотек.

Интеграция датапикеров и селекторов

Комбинирование датапикеров и селекторов позволяет создавать сложные фильтры и панели управления. Пример фильтра по дате и категории:

<script>
  import DatePicker fr om 'svelte-datepicker';
  import Sel ect fr om 'svelte-select';

  let date = null;
  let category = null;

  let categories = [
    { value: 'news', label: 'Новости' },
    { value: 'events', label: 'События' },
    { value: 'articles', label: 'Статьи' }
  ];
</script>

<div class="filter">
  <DatePicker bind:selectedDate={date} format="DD.MM.YYYY" />
  <Select bind:value={category} {categories} placeholder="Выберите категорию" />
</div>

<p>Фильтр: {date} | {category?.label}</p>

Такой подход позволяет быстро создавать интерфейсы с динамической фильтрацией и интеграцией в систему состояния приложения, будь то Svelte stores или внешние API.

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

Оглавление