DatePicker для выбора даты

DatePicker — это компонент для выбора даты, реализующий удобный календарь и текстовое поле ввода даты. В Svelte он интегрируется через библиотеку Carbon Components Svelte, обеспечивая реактивность и полный доступ к событиям.

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

Для начала необходимо установить библиотеку через npm:

npm install carbon-components-svelte carbon-components

Импорт базового компонента и стилей:

<script>
  import 'carbon-components-svelte/css/g10.css';
  import { DatePicker, DatePickerInput } from 'carbon-components-svelte';
  import { writable } from 'svelte/store';

  let selectedDate = writable('');
</script>

Структура DatePicker

Компонент DatePicker состоит из двух ключевых элементов:

  1. DatePicker — контейнер календаря, управляющий логикой выбора даты.
  2. DatePickerInput — текстовое поле для ввода или отображения выбранной даты.

Пример базовой структуры:

<DatePicker bind:value={selectedDate} dateFormat="m/d/Y">
  <DatePickerInput
    placeholder="Выберите дату"
    labelText="Дата"
  />
</DatePicker>

Пояснения к свойствам:

  • bind:value — связывает выбранную дату с переменной Svelte, обеспечивает реактивное обновление.
  • dateFormat — задаёт формат даты. Поддерживаются строки в стиле m/d/Y, d-m-Y и другие.
  • placeholder — текст, отображаемый до выбора даты.
  • labelText — текст метки для поля ввода.

Управление диапазонами дат

DatePicker позволяет ограничивать допустимые значения через свойства:

<DatePicker
  bind:value={selectedDate}
  minDate="2026-03-01"
  maxDate="2026-12-31"
  dateFormat="Y-m-d"
>
  <DatePickerInput labelText="Дата события" placeholder="ГГГГ-ММ-ДД" />
</DatePicker>
  • minDate и maxDate задают диапазон допустимых дат.
  • Попытка выбрать дату вне диапазона приведёт к визуальному предупреждению.

Выбор диапазона дат (Range Picker)

Для выбора диапазона используется свойство type="range":

<DatePicker type="range" bind:value={dateRange} dateFormat="Y-m-d">
  <DatePickerInput labelText="Начало" placeholder="Начальная дата" />
  <DatePickerInput labelText="Конец" placeholder="Конечная дата" />
</DatePicker>
  • bind:value связывается с массивом [startDate, endDate].
  • Компонент автоматически обеспечивает корректное сопоставление начальной и конечной даты.

Работа с событиями

DatePicker поддерживает события изменения значения:

<DatePicker bind:value={selectedDate} on:change={handleChange}>
  <DatePickerInput labelText="Дата" placeholder="Выберите дату" />
</DatePicker>

<script>
  function handleChange(event) {
    console.log('Выбранная дата:', event.detail.value);
  }
</script>
  • on:change срабатывает при выборе новой даты.
  • В объекте события event.detail.value хранится текущее значение компонента.

Настройка визуальных стилей

Carbon Components Svelte позволяет менять визуальные темы через CSS классы:

  • light и dark темы подключаются через стили библиотеки.
  • Стили компонентов можно расширять с помощью Svelte классов:
<DatePicker class="custom-datepicker" bind:value={selectedDate}>
  <DatePickerInput labelText="Дата" />
</DatePicker>

<style>
  .custom-datepicker {
    --cds-background: #f4f4f4;
    --cds-border-color: #0f62fe;
  }
</style>

Локализация и формат даты

DatePicker поддерживает различные форматы и локали:

<DatePicker bind:value={selectedDate} dateFormat="d/m/Y" locale="ru">
  <DatePickerInput labelText="Дата" />
</DatePicker>
  • locale — задаёт язык календаря и форматирование.
  • dateFormat позволяет точно контролировать вывод даты в поле ввода.

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

DatePicker легко интегрируется с формами Svelte и библиотеками валидации:

<form on:submit|preventDefault={submitForm}>
  <DatePicker bind:value={selectedDate} required>
    <DatePickerInput labelText="Дата рождения" />
  </DatePicker>
  <button type="submit">Отправить</button>
</form>

<script>
  function submitForm() {
    console.log('Дата отправлена:', selectedDate);
  }
</script>
  • Атрибут required делает поле обязательным для заполнения.
  • Связка с bind:value обеспечивает реактивное получение значения при отправке формы.

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

  • Кастомные кнопки и слоты: через слоты можно добавлять кнопки для очистки даты или быстрой навигации по месяцам.
  • Стилизация календаря: доступ к внутренним элементам через CSS-переменные позволяет изменять цвет активного дня, выделение диапазона и элементы навигации.
  • Поддержка клавиатуры: стрелки клавиатуры позволяют перемещаться между днями, Enter подтверждает выбор, Esc закрывает календарь.

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

Оглавление