Date.getTimezoneOffset() в JavaScript — зсув часового поясу

Загальний опис

Date.prototype.getTimezoneOffset() — це метод у JavaScript, призначений для отримання зміщення часової зони в хвилинах між місцевим часом та Універсальним координованим часом (UTC). Цей метод відіграє ключову роль у розробці веб-застосунків, де правильне відображення часу відповідно до місцевого часу користувача є критично важливим.

Метод Date.prototype.getTimezoneOffset() не приймає жодних аргументів і повертає зміщення часу у хвилинах. Він корисний, коли треба конвертувати місцевий час у UTC або навпаки, а також для визначення місцевого часу користувача. Основні сфери застосування включають, але не обмежуються, обробкою часу і дати у туристичних сервісах, геолокаційних службах та в інших сценаріях, де важливий контекст часової зони.

Подивимося на практичний приклад:

let date = new Date();
let offset = date.getTimezoneOffset();
console.log(offset);

У випадку, коли ви запустите цей код в Україні (яка, до речі, має UTC+2 години), результатом буде "-120". Це означає, що поточна часова зона на 120 хвилин випереджає UTC.

Важливо зазначити, що getTimezoneOffset() є частиною прототипу Date, а отже, доступний для всіх екземплярів об'єкта Date. Крім того, цей метод часто використовується в поєднанні з іншими методами Date, щоб забезпечити повну адаптацію часу до потреб користувача.

Наприклад, якщо ви хочете конвертувати часову мітку UTC в локальний час:

let utcDate = new Date(Date.UTC(2023, 0, 1)); // 1 січня 2023 року в UTC
let offset = utcDate.getTimezoneOffset();
let localDate = new Date(utcDate.setMinutes(utcDate.getMinutes() - offset));
console.log(localDate);

Цей код конвертує часову мітку UTC в місцевий час, враховуючи часовий зсув.

правити

Порада

Якщо ви використовуєте getTimezoneOffset() з метою врахування літнього часу, будьте обережні. Деякі країни можуть змінювати свої правила щодо літнього часу, тому завжди перевіряйте актуальність інформації.

автор: Bond правити

Порада

Якщо вам легше сприймати часовий зсув у годинах, а не в хвилинах, просто поділіть результат getTimezoneOffset() на 60:

let offsetInHours = date.getTimezoneOffset() / 60;

автор: Bond правити

Нотатка

Позитивне значення результату вказує на те, що місцевий час відстає від UTC, а негативне – випереджає.

автор: Bond правити

Нотатка

При використанні Date.prototype.getTimezoneOffset() необхідно пам'ятати, що він повертає зсув у хвилинах, який потрібно відняти від UTC, щоб отримати місцевий час. Наприклад, якщо метод поверне "-120", це означає, що ваша часова зона випереджає UTC на 2 години.

let date = new Date();
let offset = date.getTimezoneOffset();
let localHour = date.getUTCHours() - (offset / 60);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

getTimezoneOffset()

Повернення

integer

Повертає різницю в хвилинах між місцевим часом та часом UTC (Універсальним координованим часом). Якщо місцевий час передує UTC, результат буде негативним.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Date.prototype.getTimezoneOffset()</h2>
  <p class="description">Повертає різницю в хвилинах між місцевим часом та UTC.</p>
</header>
<main>
  <div class="result">
    <button onclick="showOffset()">Отримати часовий зсув</button>
    <div id="offsetResult">Часовий зсув: не визначено</div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

function showOffset() {
  let currentDate = new Date();
  let offset = currentDate.getTimezoneOffset();
  let offsetInHours = offset / 60;

  let resultText = offsetInHours < 0 ? `UTC+${Math.abs(offsetInHours)}` : `UTC-${offsetInHours}`;
  document.getElementById("offsetResult").innerText = "Часовий зсув: " + resultText;
}
//# sourceURL=pen.js

// Створюємо новий об'єкт дати
let currentDate = new Date();

// Отримуємо часовий зсув у хвилинах
let offset = currentDate.getTimezoneOffset();

// Переводимо зсув у години
let offsetInHours = offset / 60;

// Виводимо місцеву часову зону у форматі UTC
if (offsetInHours < 0) {
    console.log(`UTC+{Math.abs(offsetInHours)}`);
} else {
    console.log(`UTC-{offsetInHours}`);
}

// Задаємо час у форматі UTC
let utcHour = 14; // 14:00 у форматі UTC

// Отримуємо часовий зсув у хвилинах за допомогою методу getTimezoneOffset
let offset = new Date().getTimezoneOffset();

// Переводимо зсув у години та додаємо до UTC часу
let localHour = utcHour - (offset / 60);

// Виводимо місцевий час
console.log(`Місцевий час: {localHour}:00`);