css.in.ua
Підтримати

JS метод Date.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() дозволяє вам використовувати різні опції для кастомізації відображення дати. Спробуйте різні комбінації параметрів, щоб зрозуміти, як краще представити дату для ваших користувачів.
Порада:

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

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

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

Синтаксис

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

Параметри

locales

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

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

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".

Return

string

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

Переглядачі

Переглядач

1

1

1

5

12
Переглядач

4.4

18

4

1
Переглядач

0.10.0

1.0

Приклади


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

У даному прикладі створюється новий об'єкт currentDate, який представляє собою поточну дату і час. Далі за допомогою Date.prototype.toLocaleDateString() ця дата форматується відповідно до американської локалі ('en-US') з довгими назвами місяців і числами року та дня. Після цього форматована дата виводиться в консоль.

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

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

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

У цьому прикладі ми створюємо новий об'єкт independenceDay для дати 7 грудня 2023 року. Потім, з допомогою методу Date.prototype.toLocaleDateString(), ми форматуємо цю дату відповідно до української локалі ('uk-UA'), вказуючи довгі назви місяців і виводячи дату у форматі "день місяць рік". Закінченою форматовану дату виводимо в консоль.

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

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

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

Спільнота

Зв'язок