DatePickerInput и кастомизация

DatePickerInput — это компонент, предназначенный для выбора даты в формах и интерфейсах на основе Carbon Design System. В Svelte он реализован через библиотеку carbon-components-svelte и обеспечивает гибкость в использовании, валидацию и интеграцию с другими элементами интерфейса.

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

  • id (string) — уникальный идентификатор компонента. Используется для связывания с label и для доступности.

  • labelText (string) — текст метки поля. Обязательное свойство для правильной визуальной структуры.

  • placeholder (string) — текст-заполнитель, отображаемый до выбора даты.

  • type (string) — режим отображения календаря. Доступные значения:

    • "simple" — стандартный календарь.
    • "single" — выбор одной даты.
    • "range" — выбор диапазона дат.

  • value (Date | string) — текущее значение поля. Поддерживаются объекты Date и строки в формате ISO (YYYY-MM-DD).

  • minDate и maxDate (Date) — ограничения для выбора даты. Полезно для форм, где требуется ограничение по времени.

  • size (string) — размер поля, возможные значения: "sm", "md", "lg".

  • invalid (boolean) — состояние ошибки. При значении true компонент визуально помечается как недопустимый.

  • invalidText (string) — текст ошибки, отображаемый пользователю.

  • disabled (boolean) — блокировка поля.

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

<DatePickerInput
  id="birthday"
  labelText="Дата рождения"
  placeholder="Выберите дату"
  type="single"
  value={selectedDate}
  on:change={(e) => selectedDate = e.detail.value}
/>

События

  • change — срабатывает при изменении даты. Возвращает объект с ключом value.
  • focus и blur — стандартные события фокуса.
  • click — может использоваться для кастомных триггеров открытия календаря.

Кастомизация отображения

  1. Форматирование даты

По умолчанию компонент отображает дату в формате ISO. Для локализации или пользовательского формата используется проп format и функция преобразования:

<DatePickerInput
  id="custom-format"
  labelText="Выберите дату"
  placeholder="ДД.ММ.ГГГГ"
  type="single"
  value={selectedDate}
  format={(date) => date.toLocaleDateString('ru-RU')}
/>
  1. Стилизация через классы

Компонент принимает проп class, позволяющий добавлять кастомные CSS-классы для контейнера:

<DatePickerInput
  id="styled-datepicker"
  labelText="Дата события"
  class="my-datepicker"
  value={selectedDate}
/>

<style>
  .my-datepicker input {
    border-color: #0f62fe;
    background-color: #f4f4f4;
  }
</style>
  1. Слоты для кастомного контента

Компонент поддерживает слот icon для замены стандартного календаря на свой SVG или компонент:

<DatePickerInput id="icon-slot" labelText="Дата">
  <svg slot="icon" width="16" height="16" viewBox="0 0 16 16">
    <path d="..."/>
  </svg>
</DatePickerInput>

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

Использование типа "range" позволяет выбрать период:

<DatePickerInput
  id="date-range"
  labelText="Период"
  type="range"
  value={[startDate, endDate]}
  minDate={new Date(2020, 0, 1)}
  maxDate={new Date()}
/>

Особенности:

  • Значение передаётся как массив из двух дат [startDate, endDate].
  • Компонент корректно проверяет последовательность дат и позволяет задавать ограничения.

Валидация и обработка ошибок

Состояние invalid и invalidText позволяют интегрировать компонент с валидацией формы:

<DatePickerInput
  id="validation"
  labelText="Дата события"
  invalid={isInvalid}
  invalidText="Выберите корректную дату"
  value={selectedDate}
/>

<script>
  let selectedDate = null;
  let isInvalid = false;

  function validateDate(date) {
    isInvalid = !date || date < new Date();
  }
</script>

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

DatePickerInput легко использовать с формами и библиотеками валидации (например, svelte-forms-lib). Событие change удобно связывать с состоянием формы:

<form on:submit|preventDefault={handleSubmit}>
  <DatePickerInput
    id="form-date"
    labelText="Дата"
    value={form.date}
    on:change={(e) => form.date = e.detail.value}
  />
  <button type="submit">Отправить</button>
</form>

Кастомизация календаря

Для глубокой кастомизации можно использовать внутренние CSS-переменные Carbon и темы. Например, изменить цвет активной даты и фона:

:global(.bx--date-picker__input) {
  --cds-interactive-01: #0f62fe; /* цвет активной даты */
  --cds-ui-01: #ffffff;          /* фон календаря */
}

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

  • Не рендерить одновременно большое количество DatePickerInput без необходимости, так как каждый экземпляр содержит календарь с динамическим DOM.
  • Использовать bind:value для синхронизации состояния, чтобы избежать лишних событий change.
  • Для диапазонов с большим количеством дат предпочтительно хранить только объекты Date вместо строк, чтобы избежать повторного парсинга.

Итоговые возможности

  • Выбор одной даты или диапазона.
  • Поддержка локализации и кастомного формата.
  • Встроенная валидация и визуальные подсказки ошибок.
  • Полная стилизация через классы, слоты и CSS-переменные.
  • Гибкая интеграция с формами Svelte и библиотеками состояния.

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

Оглавление