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

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

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

Компонент DatePicker принимает свойства, которые определяют, как дата отображается в интерфейсе:

dateFormat — строка, задающая формат отображения даты. Поддерживаются форматы, совместимые с библиотекой date-fns, например:
```
<DatePicker
  dateFormat="dd/MM/yyyy"
  value={selectedDate} />
```
Ключевые символы формата:
- dd — день с ведущим нулем
- MM — месяц с ведущим нулем
- yyyy — год в четырехзначном формате
placeholder — текст-заполнитель, показываемый до выбора даты. Например:
```
placeholder="Выберите дату"
```
locale — настройка локали для форматирования даты и названий месяцев/дней недели:
```
import { ru } from 'date-fns/locale';
<DatePicker locale={ru} />
```
Использование локали позволяет автоматически адаптировать компоненты к региональным стандартам, включая порядок дня, месяца и года.

Форматирование времени

Компонент TimePicker поддерживает как 12-часовой, так и 24-часовой формат:

hourFormat — задает 12-часовой ('12') или 24-часовой ('24') режим:
```
<TimePicker hourFormat="24" value={selectedTime} />
```
step — интервал минут, доступных для выбора. Например, step={15} позволяет выбирать время с шагом 15 минут.
placeholder — аналогично DatePicker, текст-заполнитель для поля ввода времени:
```
placeholder="HH:MM"
```

Связь с локалью и международными стандартами

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

Форматирование даты и времени автоматически адаптируется к выбранной локали.
Возможна интеграция с библиотекой date-fns для обработки пользовательского ввода и преобразования форматов.

Для корректного отображения можно использовать функцию format из date-fns:

import { format } from 'date-fns';
import { ru } from 'date-fns/locale';

let selectedDate = new Date();
let formattedDate = format(selectedDate, 'dd MMMM yyyy', { locale: ru });

Пользовательские маски и валидация

Carbon Components Svelte позволяет настраивать поведение ввода через свойства и события:

on:change — событие, которое срабатывает при выборе даты или времени, позволяя валидировать ввод:
```
<DatePicker on:change={(e) => validateDate(e.detail.value)} />
```
minDate и maxDate — ограничения диапазона дат, предотвращающие выбор недопустимых значений:
```
<DatePicker minDate={new Date(2026, 0, 1)} maxDate={new Date(2026, 11, 31)} />
```
В сочетании с кастомными функциями форматирования можно реализовать сложные сценарии: например, отображение дат в формате ISO для хранения и локального отображения в привычном пользователю виде.

Взаимодействие компонентов

Для удобства комбинируются DatePicker и TimePicker для создания DateTime Picker. Связка выполняется через реактивные переменные:

<script>
  let date = new Date();
  let time = "14:30";

  $: combinedDateTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), ...time.split(':'));
</script>

<DatePicker bind:value={date} />
<TimePicker bind:value={time} />

Это позволяет:

Сохранять и использовать единый объект Date.
Форматировать вывод и хранение отдельно для даты и времени.
Применять локаль и пользовательские форматы ко всему интерфейсу.