toLocaleDateString() — дата у форматі потрібної країни

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

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

Основна функціональність Date.prototype.toLocaleDateString() полягає у тому, що він конвертує об’єкт Date у рядкове представлення з урахуванням конкретних налаштувань локалі. Метод приймає два параметри: локалі та об’єкт опцій, який може містити різні налаштування, наприклад, стиль дати. Наприклад:

let date = new Date(Date.UTC(2023, 8, 25));
let result = date.toLocaleDateString('uk-UA', {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'});
console.log(result); // вівторок, 25 вересня 2023 р.

У цьому прикладі toLocaleDateString() повертає рядок, який відображає день тижня, день, місяць та рік українською мовою, відповідно до переданих параметрів.

Особливість методу полягає у його спроможності працювати з різними локалізаціями, що дозволяє вам відображати дату у вигляді, який є найбільш зрозумілим для конкретного користувача. Це робить метод корисним для розробки веб-додатків, які можуть бути використані користувачами з різних країн і регіонів.

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

Наприклад, можна використовувати параметри, такі як weekday, era, year, month, day, hour, minute, second, та timeZoneName у об’єкті опцій для отримання більш детальної інформації:

let detailedDate = date.toLocaleDateString('en-US', {weekday: 'long', era: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short'});
console.log(detailedDate); // Tuesday, September 25, 2023 AD, 12:00:00 AM GMT+2

правити

Порада

Date.prototype.toLocaleDateString() дозволяє вам використовувати різні опції для кастомізації відображення дати. Спробуйте різні комбінації параметрів, щоб зрозуміти, як краще представити дату для ваших користувачів.

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

Порада

Деякі платформи та браузери можуть інтерпретувати дату по-різному, тому завжди тестуйте свій код на різних платформах і браузерах, аби впевнитись, що Date.prototype.toLocaleDateString() працює коректно і консистентно в усіх середовищах.

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

Порада

Коли ви користуєтесь Date.prototype.toLocaleDateString(), завжди вказуйте правильну локаль, щоб уникнути неприємних ситуацій з відображенням дати. Наприклад, якщо ви хочете відформатувати дату для України, використовуйте локаль ‘uk-UA’.

let date = new Date();
console.log(date.toLocaleDateString('uk-UA')); // правильно вказана локаль для України

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

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

Синтаксис

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

Параметри

locales

Може бути рядком або масивом рядків, які відповідають мовним тегам BCP 47, наприклад: "en-US" для англійської мови у Сполучених Штатах, "uk-UA" для української мови в Україні.

Якщо locales не вказано, буде використовуватися локаль за замовчуванням.

автор: Bond

правити

options

Об'єкт, який коригує формат виводу. Може містити наступні властивості:

• weekday: ("narrow", "short", "long") - для представлення днів тижня.
• era: ("narrow", "short", "long") - для представлення ери.
• year: ("2-digit", "numeric") - для представлення року.
• month: ("2-digit", "numeric", "narrow", "short", "long") - для представлення місяця.
• day: ("2-digit", "numeric") - для представлення дня місяця.
• hour, minute, second: ("2-digit", "numeric") - для представлення часу (годин, хвилин, секунд).
• timeZoneName: ("short", "long") - для представлення назви часового поясу.

Якщо weekday, year, month та day всі не визначені, то year, month, та day будуть встановлені як "numeric".

автор: Bond

правити

Повернення

string

Повертає рядок, який представляє датну частину даного екземпляра Date, відформатовану згідно з конвенціями конкретної мови (локалі). Значення, яке повертається, базується на параметрах locales та options, які можна передати методу для кастомізації виводу.

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<header>
  <h2 class="title">Date.prototype.toLocaleDateString()</h2>
  <p class="description">Метод конвертує дату об'єкта в рядок, відформатований відповідно до локальних конвенцій.</p>
</header>
<main>
  <div class="result">
    <label for="locale">Виберіть локаль: </label>
    <select id="locale" onchange="formatDate()">
      <option value="en-US">en-US</option>
      <option value="uk-UA">uk-UA</option>
    </select>
    <p id="output">Дата: </p>
  </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);
}

label, select, p {
  margin-bottom: 10px;
}

function formatDate() {
  const locale = document.getElementById('locale').value;
  const output = document.getElementById('output');
  const currentDate = new Date();
  output.textContent = 'Дата: ' + currentDate.toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' });
}

window.onload = formatDate; // Format date on page load
//# sourceURL=pen.js

// Створення нового об'єкта дати
let currentDate = new Date();

// Форматування дати відповідно до локалі США
let formattedDateUS = currentDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });

console.log(formattedDateUS); // Виведення форматованої дати в консоль

// Створення об'єкта дати для 7 грудня 2023 року
let independenceDay = new Date(2023, 11, 7); 

// Форматування дати відповідно до української локалі з довгими назвами місяців
let formattedDateUA = independenceDay.toLocaleDateString('uk-UA', { year: 'numeric', month: 'long', day: 'numeric' });

console.log(formattedDateUA); // Виведення форматованої дати в консоль