Localizarea datelor și timpului

Pentru localizarea datelor și timpului în JavaScript se utilizează obiectul Intl.DateTimeFormat. Constructorul său poate accepta doi parametri.

Intl.DateTimeFormat([locales[, options]])

Pentru localizarea datelor și a timpului în JavaScript se utilizează obiectul Intl.DateTimeFormat. Constructorul său poate accepta doi parametri:

Intl.DateTimeFormat([locales[, options]])

Parametrul locales reprezintă codul limbii în format BCP 47 sau un set de coduri de limbi.

Parametrul options reprezintă un set suplimentar de opțiuni:

• dateStyle: definește stilul de formatare a datei. Valorile posibile:

1) "full" 2) "long" 3) "medium" 4) "short"

• timeStyle: definește stilul de formatare a timpului. Valorile posibile:

1) "full" 2) "long" 3) "medium" 4) "short"

• calendar: setează calendarul. Valorile posibile: "buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8601", "japanese", "persian", "roc"
• numberingSystem: setează sistemul de numerație aplicat. Valorile posibile: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"
• dayPeriod: formatul perioadei zilei. Valorile posibile: "narrow", "short", "long".
• timeZone: zona temporală.
• hour12: indică dacă se va utiliza formatul de 12 ore (valoarea true) sau formatul de 24 de ore (valoarea false).
• hourCycle: ciclul orar. Valorile posibile: "h11", "h12", "h23", "h24".
• formatMatcher: stabilește algoritmul de potrivire a formatului datei/timpului. Valorile posibile: "basic" și "best fit" (valoarea implicită).
• weekday: definește formatul zilei săptămânii. Valorile posibile:

1) "long" (de exemplu, Thursday) 2) "short" (de exemplu, Thu) 3) "narrow" (de exemplu, T - abreviere pentru Thursday)

• era: definește formatul de afișare a erei. Valorile posibile:

1) "long" (de exemplu, Anno Domini) 2) "short" (de exemplu, AD) 3) "narrow" (de exemplu, A)

• year: definește formatul anului. Valorile posibile:

1) "numeric" (numărul complet, de exemplu, 2021) 2) "2-digit" (afișează doar ultimele două cifre)

• month: definește formatul lunii. Valorile posibile:

1) "numeric" (de exemplu, 2) 2) "2-digit" (în format cu două cifre, de exemplu, 02) 3) "long" (de exemplu, March) 4) "short" (de exemplu, Mar) 5) "narrow" (de exemplu, M)

• day: definește cum se afișează numărul zilei. Valorile posibile:

1) "numeric" (de exemplu, 2) 2) "2-digit" (în format cu două cifre, de exemplu, 02)

• hour: setează formatul orei. Valorile posibile: "numeric" și "2-digit"
• minute: setează formatul minutelor. Valorile posibile: "numeric" și "2-digit"
• second: setează formatul secundelor. Valorile posibile: "numeric" și "2-digit"
• fractionalSecondDigits: definește formatul fracțiilor de secundă. Valorile posibile:

1) "0" (fracțiile de secundă nu sunt afișate) 2) "1" (se afișează doar prima cifră a fracțiilor de secundă, de exemplu, la valoarea 736 se afișează 7) 3) "2" (se afișează doar primele două cifre ale fracțiilor de secundă, de exemplu, la valoarea 736 se afișează 73) 4) "3" (se afișează trei cifre ale fracțiilor de secundă, de exemplu, la valoarea 736 se afișează 736)

• timeZoneName: definește reprezentarea denumirii zonei temporale. Valorile posibile:

1) "long" (denumirea completă, de exemplu, "Pacific Standard Time, Nordamerikanische Westküsten-Normalzeit") 2) "short" (denumirea scurtă, de exemplu, PST, GMT-8) 3) "longOffset" (denumirea completă în format GMT, de exemplu, "GMT-8") 4) "shortOffset" (denumirea scurtă în format GMT, de exemplu, "GMT-0800") 5) "longGeneric" (formatul generic complet, de exemplu, "Pacific Time, Nordamerikanische Westküstenzeit") 6) "shortGeneric" (formatul generic scurt, de exemplu, "PT, Los Angeles Zeit")

Pentru formatarea datei, obiectul Intl.DateTimeFormat oferă metoda format(), în care se transmite data ce trebuie formatată - obiectul Date.

Să examinăm câteva exemple:

const now = new Date();
const ruDate = new Intl.DateTimeFormat("ro").format(now);
console.log(roDate);    // 16.11.2023
const enDate = new Intl.DateTimeFormat("en").format(now);
console.log(enDate);    // 11/16/2023

În acest caz, în constructorul Intl.DateTimeFormat se transmite valoarea doar pentru primul parametru locales. În primul caz este codul "ro", care reprezintă cultura română, iar în al doilea caz codul "en" - cultura anglofonă. Și în funcție de codul culturii transmis obținem rezultate diferite la formatarea datei.

Formatarea datei

Implicit, metoda format() returnează data în format scurt, adică de fapt aplicând setarea {dateStyle: "short"}. Cu ajutorul parametrului dateStyle putem configura afișarea datei. Să vedem ce opțiuni de afișare a datelor ne oferă obiectul Intl.DateTimeFormat pe exemplul culturii rusofone:

Sigur, iată traducerea textului rusesc în română:

const now = new Date();
const shortDate = new Intl.DateTimeFormat("ro", {dateStyle: "short"}).format(now);
console.log(shortDate);     // 12.09.2021
const mediumDate = new Intl.DateTimeFormat("ro", {dateStyle: "medium"}).format(now);
console.log(mediumDate);    // 12 sept. 2021
const longDate = new Intl.DateTimeFormat("ro", {dateStyle: "long"}).format(now);
console.log(longDate);      // 12 septembrie 2021
const fullDate = new Intl.DateTimeFormat("ro", {dateStyle: "full"}).format(now);
console.log(fullDate);      // duminică, 12 septembrie 2021

Formatarea timpului

Implicit, metoda format() nu afișează timpul. Cu ajutorul parametrului timeStyle putem configura afișarea timpului pe exemplul culturii rusofone:

const now = new Date();
const shortTime = new Intl.DateTimeFormat("ro", {timeStyle: "short"}).format(now);
console.log(shortTime);     // 20:42
const mediumTime = new Intl.DateTimeFormat("ro", {timeStyle: "medium"}).format(now);
console.log(mediumTime);    // 20:42:08
const longTime = new Intl.DateTimeFormat("ro", {timeStyle: "long"}).format(now);
console.log(longTime);      // 20:42:08 GMT+11
const fullTime = new Intl.DateTimeFormat("ro", {timeStyle: "full"}).format(now);
console.log(fullTime);      // 20:42:08 GMT+11:00

Combinarea datei și a timpului

Dacă utilizăm doar setarea dateStyle, atunci se returnează doar data. Dacă aplicăm setarea timeStyle, atunci se returnează doar timpul. Pentru a returna și data, și timpul, trebuie să setăm ambele opțiuni:

const now = new Date();
const shortDateTime = new Intl.DateTimeFormat("ro", {dateStyle: "short", timeStyle: "short"}).format(now);
console.log(shortDateTime);     - 12.09.2021, 20:43

Alte setări

Dacă este necesar, putem utiliza și alte setări. De exemplu, dacă trebuie să aplicăm sistemul de numerație arab, putem configura afișarea numerelor cu ajutorul parametrului numberingSystem:

const now = new Date();
const arDateTime1 = new Intl.DateTimeFormat("ar", {dateStyle: "short", timeStyle: "short"}).format(now);
console.log(arDateTime1);       - 12‏/9‏/2021 8:51 م
const arDateTime2 = new Intl.DateTimeFormat("ar", {dateStyle: "short", timeStyle: "short", numberingSystem: "arab"}).format(now);
console.log(arDateTime2);   - ١٢‏/٩‏/٢٠٢١ ٨:٥٠ م

Dacă aplicația este destinată unui mediu unde funcționează alt calendar, atunci se poate seta parametrul calendar:

const now = new Date();
const persianDateTime = new Intl.DateTimeFormat("fa", {dateStyle: "long", numberingSystem: "arab", calendar: "persian"}).format(now);
console.log(persianDateTime);       - ٢١ شهریور ١٤٠٠
const zhDateTime = new Intl.DateTimeFormat("zh", {dateStyle: "long", calendar: "chinese"}).format(now);
console.log(zhDateTime);            - 2021辛丑年八月初六

Metode Date

Trebuie de menționat că tipul Date oferă, de asemenea, o serie de metode pentru localizarea datei și a timpului:

• toLocaleString()
• ToLocaleDateString()
• toLocaleTimeString()

Ca parametru, aceste metode acceptă localizarea în care trebuie să fie localizată data și timpul:

const now = new Date();
console.log(now.toLocaleString("en"));      - 11/16/2023, 9:17:25 PM
console.log(now.toLocaleTimeString("en"));  - 9:17:25 PM
console.log(now.toLocaleDateString("en"));  - 11/16/2023

console.log(now.toLocaleString("ro"));      - 16.11.2023, 21:17:25
console.log(now.toLocaleTimeString("ro"));  - 21:17:25
console.log(now.toLocaleDateString("ro"));  - 16.11.2023