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

В библиотеке MUI работа с датами тесно связана с компонентами выбора даты, такими как DatePicker, DateTimePicker и LocalizationProvider. Правильная локализация позволяет пользователям видеть даты и времена в привычном формате и с корректными переводами дней недели и месяцев.

LocalizationProvider

Компонент LocalizationProvider является ключевым для настройки локализации. Он оборачивает компоненты выбора даты и передает им необходимые настройки локали и библиотеку работы с датами.

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

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import ruLocale from 'date-fns/locale/ru';

<LocalizationProvider dateAdapter={AdapterDateFns} locale={ruLocale}>
  <DatePicker label="Выберите дату" value={selectedDate} onCha nge={handleDateChange} />
</LocalizationProvider>

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

  • dateAdapter определяет, какая библиотека для работы с датами будет использоваться. MUI поддерживает date-fns, dayjs, luxon и moment.
  • locale задает локаль для форматирования дат. Для date-fns это объект локали, импортируемый из пакета date-fns/locale.

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

Помимо языковых особенностей, локаль влияет на формат даты. Например, в русском формате чаще используется dd.MM.yyyy, тогда как в американском — MM/dd/yyyy. MUI автоматически подхватывает формат из переданной локали. При необходимости можно задавать собственный формат:

<DatePicker
  label="Выберите дату"
  value={selectedDate}
  onCha nge={handleDateChange}
  inputFormat="dd.MM.yyyy"
/>

Совет: всегда задавать inputFormat, если требуется строгий контроль над отображением даты, так как разные локали могут по-разному интерпретировать ввод пользователя.

Локализация дней недели и месяцев

Компоненты выбора даты отображают дни недели, месяцы и кнопки навигации. Эти тексты берутся из локали, переданной в LocalizationProvider. Для расширенной настройки можно использовать componentsProps:

<DatePicker
  componentsProps={{
    actionBar: {
      actions: ['clear', 'cancel', 'accept']
    }
  }}
/>

Также можно переопределить подписи месяцев и дней через adapter при необходимости, но в большинстве случаев встроенные локали покрывают стандартные требования.

Работа с разными библиотеками

MUI поддерживает несколько адаптеров для работы с датами:

  • date-fns: легковесная библиотека с поддержкой локалей через отдельные пакеты. Хорошо подходит для большинства проектов.
  • dayjs: минималистичная и производительная библиотека. Локализация подключается через плагин localeData.
  • luxon: поддерживает богатые возможности форматирования, часовые пояса и локали.
  • moment: классическая библиотека, устаревающая, но с полным набором локалей.

Выбор адаптера влияет на синтаксис локализации и поддержку форматов. Например, dayjs требует явного вызова метода .locale('ru') для установки локали.

Локализация временных зон

Для отображения даты и времени в нужной временной зоне MUI не управляет этим напрямую — это задача адаптера и библиотеки для работы с датами. Например, для Luxon можно использовать DateTime.local().setZone('Europe/Moscow') и передавать результат в DatePicker.

Настройка форматов для разных языков

MUI позволяет задавать кастомные форматы отображения через объект formats:

<LocalizationProvider
  dateAdapter={AdapterDateFns}
  locale={ruLocale}
  adapterLocale={ruLocale}
  dateFormats={{
    keyboardDate: 'dd.MM.yyyy',
    monthAndYear: 'MMMM yyyy',
  }}
>
  <DatePicker label="Дата" />
</LocalizationProvider>

Это особенно полезно, когда требуется единообразие форматов по всему приложению, независимо от настроек локали по умолчанию.

Практические рекомендации

  • Всегда использовать LocalizationProvider для обертки компонентов выбора даты.
  • Выбирать адаптер, исходя из размера проекта и требований к функциональности.
  • Для русской локали предпочтителен date-fns с импортом ru из date-fns/locale.
  • Задавать inputFormat и dateFormats, чтобы избежать неоднозначного отображения.
  • Проверять корректность локализации на всех целевых устройствах, так как разные браузеры могут по-разному интерпретировать стандартные форматы дат.

Эти практики обеспечивают корректное отображение дат и времени, улучшая пользовательский опыт в приложениях на React с использованием MUI.

Оглавление