Как отображать названия часовых поясов, например PST или Pacific Standard Time

Введение

Когда вы показываете пользователям время, указание часового пояса помогает понять, относится ли время к их местному времени или к другому. Встреча, назначенная на 3:00 PM PST, подсказывает пользователю, что нужно перевести время из тихоокеанского пояса. Без метки PST пользователю придётся догадываться, какой часовой пояс имеется в виду.

Часовые пояса могут отображаться в разных форматах. Можно показывать сокращённые названия, такие как PST, полные названия, например Pacific Standard Time, или форматы на основе смещения, как GMT-8. Разные форматы подходят для разных задач. Сокращения экономят место, но могут быть неочевидны. Полные названия понятнее, но занимают больше места. Смещения удобны, когда важна разница во времени, а не конкретное название пояса.

В JavaScript есть API Intl.DateTimeFormat, который позволяет автоматически отображать названия часовых поясов. В этом уроке объясняется, что такое названия часовых поясов, как они меняются между стандартным и летним временем, и как показывать их в разных форматах.

Форматы названий часовых поясов

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

Короткие названия используют аббревиатуры, такие как PST, EST или JST. Это экономит место, но может быть неочевидно. CST может означать Central Standard Time в Северной Америке, China Standard Time или Cuba Standard Time.

Длинные названия полностью раскрывают название часового пояса, например Pacific Standard Time, Eastern Standard Time или Japan Standard Time. Такой вариант исключает неоднозначность, но занимает больше места.

Общие названия обозначают часовой пояс без уточнения, действует ли сейчас стандартное или летнее время. PT означает Тихоокеанское время, которое может быть как PST, так и PDT в зависимости от даты.

Форматы смещений показывают разницу во времени с UTC. GMT-8 означает, что время отстает от Гринвичского времени на 8 часов. GMT-05:00 означает отставание на 5 часов, где часы и минуты разделены двоеточием.

Выбор формата зависит от вашей задачи. Используйте короткие названия, если мало места и допустима неоднозначность. Используйте длинные названия, если важна ясность, а не экономия места. Используйте смещения, если нужно показать числовое соотношение с UTC.

Использование Intl.DateTimeFormat для отображения названий часовых поясов

Конструктор Intl.DateTimeFormat принимает опцию timeZoneName, которая управляет тем, как отображаются названия часовых поясов в отформатированных датах и времени.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM PST"

Это создаёт форматтер для американского английского, который показывает время в часовом поясе America/Los_Angeles. Опция timeZoneName: 'short' добавляет сокращённое название часового пояса в результат. В итоге в конце появляется PST.

Опция timeZone задаёт, какой часовой пояс использовать при форматировании. Опция timeZoneName определяет, отображать ли и как отображать название пояса. Эти две опции работают вместе. timeZone определяет преобразование, а timeZoneName — подпись.

Отображение коротких названий часовых поясов

Опция timeZoneName: 'short' отображает сокращённые названия часовых поясов.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 10:30 AM EST"

Краткий формат выводит EST для восточного стандартного времени. Такой формат компактный и отлично подходит для таблиц, списков или других мест с ограниченным пространством.

Разные часовые пояса дают разные аббревиатуры.

const date = new Date('2025-01-15T15:30:00Z');

const formatters = [
  { timeZone: 'America/Los_Angeles', name: 'Pacific' },
  { timeZone: 'America/Chicago', name: 'Central' },
  { timeZone: 'America/New_York', name: 'Eastern' },
  { timeZone: 'Europe/London', name: 'London' },
  { timeZone: 'Asia/Tokyo', name: 'Tokyo' }
];

formatters.forEach(({ timeZone, name }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${name}: ${formatter.format(date)}`);
});
// Output:
// Pacific: 7:30 AM PST
// Central: 9:30 AM CST
// Eastern: 10:30 AM EST
// London: 3:30 PM GMT
// Tokyo: 12:30 AM JST

Каждый часовой пояс использует свою стандартную аббревиатуру. Для Тихоокеанского — PST, для Центрального — CST, для Восточного — EST, для Лондона — GMT, для Токио — JST.

Отображение длинных названий часовых поясов

Опция timeZoneName: 'long' показывает полные названия часовых поясов.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM Pacific Standard Time"

Длинный формат выводит Pacific Standard Time вместо PST. Это убирает неоднозначность, но занимает заметно больше места.

Длинные названия удобны, когда важна ясность и есть достаточно места.

const date = new Date('2025-01-15T15:30:00Z');

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(formatter.format(date));
// Output: "10:30 AM Eastern Standard Time"

Полное название сразу показывает, какой часовой пояс используется, не заставляя пользователя разгадывать аббревиатуру.

Отображение смещений часовых поясов

Опция timeZoneName: 'shortOffset' показывает смещение относительно UTC в компактном формате.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-8"

Это выводит GMT-8, чтобы показать, что часовой пояс отстает от UTC на 8 часов. Такой формат удобен, когда важнее числовое смещение, чем конкретное название пояса.

Опция timeZoneName: 'longOffset' показывает смещение с часами и минутами.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-08:00"

Это выводит GMT-08:00 с двоеточием между часами и минутами. Такой формат точнее и соответствует стандарту ISO 8601.

Часовые пояса с получасовым или 45-минутным смещением показывают полное смещение в длинном формате.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Kolkata',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "9:00 PM GMT+05:30"

Индийское стандартное время отличается от UTC на 5 часов 30 минут. В длинном формате смещения это отображается как GMT+05:30.

Отображение общих названий часовых поясов

Опция timeZoneName: 'shortGeneric' показывает общее сокращение, которое применяется независимо от того, действует ли переход на летнее время.

const winterFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const summerFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(winterFormatter.format(winterDate));
// Output: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// Output: "8:30 AM PT"

И зимой, и летом для Тихоокеанского времени отображается PT. Общий формат не различает Тихоокеанское стандартное время и Тихоокеанское летнее время. Это удобно, если вам нужен единый ярлык вне зависимости от сезона.

Опция timeZoneName: 'longGeneric' выводит полное общее название.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM Pacific Time"

В этом случае отображается Pacific Time вместо Pacific Standard Time. Длинный общий формат обеспечивает понятность без указания стандартного или летнего времени.

Как переход на летнее время влияет на названия часовых поясов

Названия часовых поясов меняются между стандартным временем и летним временем. Опция timeZoneName отражает это изменение автоматически.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM PST"

console.log(formatter.format(summerDate));
// Output: "8:30 AM PDT"

В январе форматтер показывает PST для Тихоокеанского стандартного времени. В июле — PDT для Тихоокеанского летнего времени. Форматтер автоматически выбирает правильное название в зависимости от даты.

Смещение также меняется между стандартным и летним временем.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// Output: "8:30 AM GMT-7"

Зимой Тихоокеанское время — это GMT-8. Летом — GMT-7. Смещение меняется на один час при переходе на летнее время.

Длинные названия также отражают это изменение.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// Output: "8:30 AM Pacific Daylight Time"

Длинный формат меняется с Pacific Standard Time на Pacific Daylight Time. Форматтер автоматически обрабатывает эти переходы в зависимости от даты и часового пояса.

Отображение названий часовых поясов на разных языках

Названия часовых поясов выглядят по-разному на разных языках. Язык, который использует форматтер для названий часовых поясов, определяется идентификатором локали.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM Pacific Standard Time"

console.log(esFormatter.format(date));
// Output: "7:30 hora estándar del Pacífico"

console.log(frFormatter.format(date));
// Output: "07:30 heure normale du Pacifique"

На английском отображается Pacific Standard Time. На испанском — hora estándar del Pacífico. На французском — heure normale du Pacifique. Каждый язык использует свой перевод названия часового пояса.

Короткие названия часто остаются одинаковыми на разных языках, потому что это аббревиатуры.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM PST"

console.log(esFormatter.format(date));
// Output: "7:30 PST"

И на английском, и на испанском используется PST для короткой аббревиатуры. Однако в этом примере на испанском опускается индикатор AM, потому что форматирование на испанском отличается от английского.

Смещения всегда остаются числовыми во всех языках.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// Output: "7:30 GMT-08:00"

И на английском, и на японском отображается GMT-08:00 для смещения. Числовые смещения не требуют перевода.

Отображение только названия часового пояса

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

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Pacific Standard Time"

Если указать только timeZoneName без других опций, форматтер выведет только название часового пояса. Это удобно, если нужно показать часовой пояс отдельно от даты и времени.

Это можно использовать для создания ярлыков или легенд.

const timeZones = [
  'America/Los_Angeles',
  'America/Chicago',
  'America/New_York',
  'Europe/London',
  'Asia/Tokyo'
];

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'long'
});

const date = new Date();

timeZones.forEach(timeZone => {
  formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'long'
  });
  console.log(formatter.format(date));
});
// Output:
// Pacific Standard Time (or Pacific Daylight Time depending on date)
// Central Standard Time (or Central Daylight Time depending on date)
// Eastern Standard Time (or Eastern Daylight Time depending on date)
// Greenwich Mean Time (or British Summer Time depending on date)
// Japan Standard Time

Так создаётся список названий часовых поясов, который удобно показывать в выпадающем меню или интерфейсе выбора.

Комбинирование названий часовых поясов с определёнными форматами даты

Можно комбинировать названия часовых поясов с определёнными вариантами форматирования даты и времени.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025, 10:30 AM EST"

Здесь объединяется полный формат даты с коротким названием часового пояса. В результате выводится день недели, полное название месяца, число, год, время и аббревиатура часового пояса.

Вы можете использовать это для создания полного отображения даты и времени.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM Pacific Standard Time"

Обратите внимание, что опцию timeZoneName нельзя использовать вместе с dateStyle или timeStyle. Если вам нужны сокращённые стили, название часового пояса уже включено в стили времени long и full.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM PST"

Стиль времени long автоматически включает короткое название часового пояса. Нет необходимости указывать timeZoneName отдельно.

Отображение названий часовых поясов для расписания событий

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

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'short',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const events = [
  { name: 'Kickoff Meeting', time: '2025-03-15T14:00:00Z', timeZone: 'America/New_York' },
  { name: 'Design Review', time: '2025-03-15T17:00:00Z', timeZone: 'America/Los_Angeles' },
  { name: 'Sprint Planning', time: '2025-03-16T01:00:00Z', timeZone: 'Asia/Tokyo' }
];

events.forEach(event => {
  const localFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: event.timeZone,
    timeZoneName: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });

  const date = new Date(event.time);
  console.log(`${event.name}: ${localFormatter.format(date)}`);
});
// Output:
// Kickoff Meeting: Mar 15, 9:00 AM EST
// Design Review: Mar 15, 9:00 AM PST
// Sprint Planning: Mar 16, 10:00 AM JST

Каждое событие отображается с его локальным часовым поясом. Пользователи видят, что Kickoff Meeting начинается в 9:00 по восточному времени, Design Review — в 9:00 по тихоокеанскому времени, а Sprint Planning — в 10:00 по времени Японии.

Вы также можете показать одно и то же событие в нескольких часовых поясах.

const meetingTime = new Date('2025-03-15T17:00:00Z');

const timeZones = [
  { zone: 'America/Los_Angeles', label: 'Pacific' },
  { zone: 'America/Chicago', label: 'Central' },
  { zone: 'America/New_York', label: 'Eastern' },
  { zone: 'Europe/London', label: 'London' }
];

console.log('Global Team Meeting:');
timeZones.forEach(({ zone, label }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${label}: ${formatter.format(meetingTime)}`);
});
// Output:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

Это показывает время одной встречи, переведённое в несколько часовых поясов. Участники команды из разных регионов могут быстро узнать своё локальное время.