TimePicker для выбора времени

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

Импорт и базовое использование

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

<script>
  import { TimePicker, TimePickerSelect } from 'carbon-components-svelte';
  let selectedTime = '';
</script>

<TimePicker bind:value={selectedTime} id="time-picker" labelText="Выберите время" />

Ключевые моменты:

  • bind:value — двусторонняя привязка выбранного времени к переменной. Позволяет реактивно отслеживать изменения.
  • id — уникальный идентификатор компонента на странице.
  • labelText — текст метки, который будет отображаться над полем ввода времени.

Настройка формата времени

TimePicker поддерживает как 12-часовой, так и 24-часовой формат. Формат задается с помощью свойства pattern или через локализацию.

<TimePicker
  bind:value={selectedTime}
  id="time-picker-24"
  labelText="Выберите время (24ч)"
  pattern="([01]?[0-9]|2[0-3]):[0-5][0-9]"
/>

<TimePicker
  bind:value={selectedTime}
  id="time-picker-12"
  labelText="Выберите время (12ч)"
  pattern="(0[1-9]|1[0-2]):[0-5][0-9] (AM|PM)"
/>

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

  • Атрибут pattern позволяет задавать регулярное выражение для проверки корректности введенного времени.
  • 12-часовой формат включает индикатор AM/PM.
  • Можно сочетать TimePicker с TimePickerSelect для выбора AM/PM через выпадающий список.

Использование TimePickerSelect для AM/PM

Компонент TimePickerSelect позволяет создавать кастомные селекты внутри TimePicker для выбора периода суток.

<TimePicker id="time-picker-select" bind:value={selectedTime} labelText="Выберите время">
  <TimePickerSelect slot="select">
    <option value="AM">AM</option>
    <option value="PM">PM</option>
  </TimePickerSelect>
</TimePicker>

Пояснения:

  • slot="select" указывает, что селект будет встроен в TimePicker.
  • Значения AM и PM могут использоваться для дальнейшей обработки выбранного времени.

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

TimePicker поддерживает стандартные события Svelte, такие как on:change, on:blur и on:focus.

<TimePicker
  bind:value={selectedTime}
  id="time-picker-events"
  labelText="Выберите время"
  on:change={(e) => console.log('Изменено время:', e.detail)}
  on:blur={() => console.log('Фокус ушёл с поля')}
  on:focus={() => console.log('Фокус на поле')}
/>
  • on:change срабатывает при каждом изменении значения.
  • e.detail содержит текущее значение времени.
  • События focus и blur полезны для валидации и динамического управления UI.

Доступность и валидация

TimePicker соответствует стандартам WCAG, обеспечивая доступность для пользователей с ограниченными возможностями. Основные инструменты:

  • aria-label и aria-describedby для улучшения читаемости вспомогательными технологиями.
  • invalid и invalidText позволяют показывать сообщение об ошибке при вводе некорректного времени.
<TimePicker
  bind:value={selectedTime}
  id="time-picker-invalid"
  labelText="Введите время"
  invalid={selectedTime.length > 0 && !/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(selectedTime)}
  invalidText="Введите корректное время в формате HH:MM"
/>

Стилизация и размеры

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

  • size="sm" | "md" | "lg" для изменения визуального размера поля.
  • disabled для блокировки поля ввода.
  • light для использования светлой темы.
<TimePicker
  bind:value={selectedTime}
  id="time-picker-styles"
  labelText="Выберите время"
  size="lg"
  disabled={false}
  light={true}
/>

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

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

TimePicker легко интегрируется с формами Svelte, поддерживая двустороннюю привязку и валидацию:

<script>
  let formData = { time: '' };
  function handleSubmit() {
    console.log('Выбрано время:', formData.time);
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <TimePicker bind:value={formData.time} id="form-time" labelText="Время встречи" />
  <button type="submit">Отправить</button>
</form>
  • bind:value обеспечивает обновление данных формы при каждом изменении.
  • Событие submit можно обрабатывать стандартным образом с Svelte.

Резюме ключевых возможностей TimePicker

  • Поддержка 12- и 24-часового формата времени.
  • Интеграция с TimePickerSelect для выбора AM/PM.
  • Полная реактивная привязка через bind:value.
  • События change, focus, blur для управления состоянием.
  • Доступность (ARIA) и встроенная валидация.
  • Гибкая стилизация и поддержка различных размеров.
  • Легкая интеграция с формами и другими компонентами Carbon Svelte.

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

Оглавление