Локализация календаря

Carbon Components Svelte предоставляет мощный набор UI-компонентов, включая календарь (DatePicker) с возможностью локализации, что особенно важно для приложений, ориентированных на пользователей из разных стран. Локализация влияет на отображение месяцев, дней недели, формата даты и текста элементов управления.

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

Компонент календаря использует стандартные механизмы JavaScript для локализации через объект Intl.DateTimeFormat. Основные параметры локализации задаются через проп locale:

<script>
  import { DatePicker } from 'carbon-components-svelte';

  let selectedDate = new Date();
</script>

<DatePicker
  bind:value={selectedDate}
  locale="ru-RU"
/>

Ключевой момент: locale принимает строку в формате [язык]-[регион], например "ru-RU" для русского языка, "en-US" для американского английского. Этот параметр отвечает за:

  • Названия месяцев (Январь, Февраль …)
  • Названия дней недели (Пн, Вт …)
  • Формат отображения даты (дд.мм.гггг)

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

Carbon Components Svelte позволяет отдельно управлять форматом даты с помощью пропа dateFormat. Это полезно, если необходимо, чтобы отображение даты соответствовало региональным стандартам:

<DatePicker
  bind:value={selectedDate}
  locale="ru-RU"
  dateFormat="dd.MM.yyyy"
/>

Поддерживаемые форматы используют стандартные шаблоны:

  • dd — день с ведущим нулём
  • MM — месяц с ведущим нулём
  • yyyy — полный год

Перевод кнопок и подсказок

Компонент календаря предоставляет проп i18n для передачи пользовательских текстов элементов управления, таких как кнопки «Назад», «Вперёд», «Сегодня», а также подсказок для дней недели:

<DatePicker
  bind:value={selectedDate}
  locale="ru-RU"
  i18n={{
    nextMonth: "Следующий месяц",
    previousMonth: "Предыдущий месяц",
    openCalendar: "Открыть календарь",
    closeCalendar: "Закрыть календарь"
  }}
/>

Особенность: Если i18n не задан, компонент автоматически использует стандартные английские тексты. Для полной локализации важно передавать переводы всех ключевых элементов.

Ограничения и работа с временными зонами

  • Компонент учитывает локаль, но не меняет временную зону пользователя. Для корректного отображения дат с учётом временной зоны рекомендуется использовать внешние библиотеки, например date-fns-tz или luxon.
  • При передаче даты через bind:value важно учитывать, что объект Date в JavaScript всегда содержит информацию о локальном времени.

Локализация диапазона дат

DatePicker поддерживает выбор диапазона (DatePickerRange). Для локализации всех элементов диапазона необходимо передавать аналогичные параметры locale и i18n:

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

<DatePickerRange
  bind:value={range}
  locale="ru-RU"
  i18n={{
    startLabel: "Дата начала",
    endLabel: "Дата окончания",
    nextMonth: "Следующий месяц",
    previousMonth: "Предыдущий месяц"
  }}
/>

Это обеспечивает корректное отображение всех надписей и календарных элементов на русском языке.

Динамическое переключение локали

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

<script>
  import { DatePicker } from 'carbon-components-svelte';
  let selectedDate = new Date();
  let currentLocale = "ru-RU";

  function switchLocale() {
    currentLocale = currentLocale === "ru-RU" ? "en-US" : "ru-RU";
  }
</script>

<button on:click={switchLocale}>Сменить язык</button>
<DatePicker bind:value={selectedDate} {currentLocale} />

Важные рекомендации

  • Для полной локализации необходимо сочетать locale и i18n. Один только locale влияет на месяцы и дни недели, но не переводит кнопки и подсказки.
  • Проверять корректность форматов даты в каждой локали, так как стандартные форматы JavaScript могут отличаться от привычных для пользователя.
  • При работе с диапазонами дат обязательно локализовать все метки начала и конца периода.

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

Оглавление