Как бы вы реализовали поле ввода даты и времени с поддержкой интернационализации?

Интернационализированный ввод даты и времени — это не только смена формата отображения, но и корректная работа с локалью, часовым поясом и календарной системой. Пользователь из США ожидает MM/DD/YYYY, из Германии — DD.MM.YYYY, а из Японии — YYYY/MM/DD. При этом хранить значения нужно в нейтральном формате, обычно в UTC или ISO 8601.

Ключевые аспекты

• Локаль — определяет порядок частей даты, разделители и названия месяцев.
• Часовой пояс — ввод должен интерпретироваться в TZ пользователя, а хранение — в UTC.
• Формат — используйте Intl.DateTimeFormat для отображения и парсинга.
• Календарь — в некоторых локалях (арабской, буддийской) отличается система летоисчисления.

Пример на JavaScript

const locale = navigator.language; // 'ru-RU'
const fmt = new Intl.DateTimeFormat(locale, {
  dateStyle: 'short',
  timeStyle: 'short',
  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
});

// Отображение
const now = new Date();
console.log(fmt.format(now)); // 05.02.2025, 14:30

// Парсинг ввода пользователя
function parseInput(str, locale) {
  // В реальном проекте используйте date-fns или Luxon
  const [date, time] = str.split(', ');
  return new Date(`${date}T${time}`);
}

// Хранение в UTC
const iso = now.toISOString(); // '2025-02-05T11:30:00.000Z'

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

1. Используйте нативный <input type="datetime-local"> — браузер сам подстроит формат под локаль.
2. Для кастомного UI берите готовые библиотеки: react-datepicker, MUI DatePicker, flatpickr — они поддерживают i18n из коробки.
3. Храните даты в UTC (ISO 8601), конвертируйте только на границе UI.
4. Учитывайте DST (переход на летнее время) — используйте date-fns-tz или Luxon.

Такой подход применяется в SaaS-продуктах, бронированиях, финансовых системах и любых сервисах с международной аудиторией. Итог: применяйте Intl API и UTC-хранение, а для сложных сценариев с часовыми поясами — специализированные библиотеки вроде Luxon или date-fns-tz.