JavaScript Intl.DateTimeFormat: sanani til va vaqt zonasiga qarab formatlash

Qisqacha: Intl.DateTimeFormat sanani qo'lda satr yig'masdan, foydalanuvchi tilida va kerakli vaqt zonasida chiqaradi: new Intl.DateTimeFormat("ru", { dateStyle: "long", timeZone: "Asia/Tashkent" }).format(sana). formatToParts natijani bo'laklarga ajratib beradi, formatRange esa "10:00–22:00" kabi oraliqni chiqaradi. Muhim tuzoq: Chrome 154 (kompyuter) da o'zbek lotin tili ma'lumotlari yo'q va uz uchun 2026 M10 5 chiqadi — o'zbekcha sanani formatToParts va o'z oy nomlaringiz bilan yig'ing.

Bu darsda

• Til belgisi (locale) va sozlamalar bilan formatlovchi yaratasiz va uni qayta ishlatasiz.
• dateStyle/timeStyle va alohida qismlar (weekday, month, hour ...) bilan kerakli ko'rinishni olasiz.
• timeZone bilan sanani kompyuter zonasidan qat'i nazar Toshkent vaqtida chiqarasiz.
• formatToParts va formatRange bilan o'z formatingizni va vaqt oralig'ini yasaysiz.
• uz locale Node va Chrome'da qanday farq qilishini bilasiz va ishonchli zaxira yozasiz.

Oldin bilishingiz kerak: Date va vaqt zonalari, Matnni o'zgartirish va tozalash, Pul va aniq hisob-kitob.

1. Nega bu kerak?

«Bahor» saytiga turli mehmonlar kiradi: o'zbekcha, ruscha va inglizcha o'qiydiganlar. Buyurtma tasdiqlanganda Sardor ularga sanani ko'rsatishi kerak. U shunday yozdi:

const OYLAR = ["yanvar", "fevral", "mart", "aprel", "may", "iyun",
  "iyul", "avgust", "sentabr", "oktabr", "noyabr", "dekabr"];
const sana = new Date("2026-10-05T12:00:00Z");
const oy = OYLAR[sana.getMonth()];

console.log(`${sana.getDate()}-${oy}, ${sana.getHours()}:00`);

Konsolda:

5-oktabr, 17:00

Bu ishlaydi, lekin uchta muammo bor. Birinchidan, faqat o'zbekcha. Ruscha uchun "5 октября" kerak — oy nomi kelishikda, kun va oy orasida chiziqcha yo'q. Inglizchada tartib boshqa — "October 5", soat esa "5:00 PM". Har til uchun alohida qoida yozish kerakmi?

Ikkinchidan, getHours() kompyuter zonasida ishlaydi — Date va vaqt zonalari darsidagi Moskva muammosi. Uchinchidan, :00 qo'lda yozilgan — 17:05 da ham "17:00" chiqardi.

Dunyodagi hamma tillarning sana qoidalari allaqachon yig'ilgan. Ikki nomni eslab qoling:

• CLDR — Unicode tashkilotining til ma'lumotlari bazasi: oy nomlari, so'z tartibi, tinish belgilari. Xuddi katta lug'at kabi.
• ICU — shu lug'atdan foydalanib matn yasaydigan dastur kutubxonasi. U brauzer va Node ichiga o'rnatilgan.

Pul va aniq hisob-kitob darsida Intl.NumberFormat shu ma'lumotdan so'mni formatlagan edi. Sanalar uchun uning "egizagi" — Intl.DateTimeFormat.

2. Formatlovchi: til belgisi va format

2.1 Birinchi formatlovchi

const sana = new Date("2026-10-05T12:00:00Z");
const ruscha = new Intl.DateTimeFormat("ru", {
  dateStyle: "long",
  timeZone: "Asia/Tashkent",
});

console.log(ruscha.format(sana));

Konsolda:

5 октября 2026 г.

Ikki qadam: avval formatlovchi yaratiladi — til va sozlamalar bilan. Keyin uning format metodiga sana beriladi. Natija — satr, faqat ko'rsatish uchun.

Formatlovchini bir marta yaratib, ko'p sanaga qo'llash mumkin. Shu "bir marta" — juda muhim, «Qayta ishlatish» bo'limida nega ekanini o'lchab ko'ramiz.

2.2 Til belgisi (locale)

Til belgisi (locale) bilan Matnni o'zgartirish darsida tanishgandik: toLocaleUpperCase("tr"). U BCP 47 standartidagi qisqa kod. Bo'laklari chiziqcha bilan ulanadi:

Birinchi bo'lak — til (kichik harf), keyin ixtiyoriy yozuv (Latn, Cyrl — bosh harf bilan), oxirida davlat (katta harf). Tartib shu. Ajratuvchi — faqat chiziqcha: uz_UZ noto'g'ri.

O'zingiz to'ldiring: rus tili, Rossiya uchun til belgisi — .

Bitta til turli davlatlarda boshqacha yozadi:

const sana = new Date("2026-10-05T12:00:00Z");
const sozlama = { dateStyle: "long", timeZone: "Asia/Tashkent" };

console.log(new Intl.DateTimeFormat("en-US", sozlama).format(sana));
console.log(new Intl.DateTimeFormat("en-GB", sozlama).format(sana));

Konsolda:

October 5, 2026
5 October 2026

2.3 Tilni bermaslik — tuzoq

Til argumentini tashlab ketsangiz, kompyuter tili olinadi:

const sana = new Date("2026-10-05T12:00:00Z");
console.log(new Intl.DateTimeFormat().format(sana));

Biz sinagan kompyuterda Node 24 — 05/10/2026 (Windows sozlamasi en-GB), xuddi shu kompyuterdagi Chrome 154 — 10/5/2026 (brauzer tili en-US). Bitta kod, bitta kompyuter — ikki xil javob. Shuning uchun bu blokda "Konsolda" yo'q: sizda yana boshqacha chiqadi.

Bu Matnni o'zgartirish darsidagi argumentsiz toLocaleUpperCase tuzog'ining aynan o'zi. Qoida: til belgisini har doim aniq bering. Foydalanuvchi tanlagan til — saytingiz sozlamasidan. Brauzer tili — navigator.language dan (masalan, "ru-RU"), lekin u hamma vaqt ham foydalanuvchi xohlagan til emas.

Tekshirib ko'ring: "uz-Latn-UZ" belgisida nechta bo'lak bor va har biri nimani bildiradi?

3. Tayyor uslublar: dateStyle va timeStyle

3.1 To'rt daraja

Eng oson yo'l — tayyor uslub. dateStyle sana uchun, timeStyle vaqt uchun; qiymatlari: "full", "long", "medium", "short".

const sana = new Date("2026-10-05T12:00:00Z");

for (const uslub of ["full", "long", "medium", "short"]) {
  const f = new Intl.DateTimeFormat("ru", {
    dateStyle: uslub,
    timeZone: "Asia/Tashkent",
  });
  console.log(uslub, f.format(sana));
}

Konsolda:

full понедельник, 5 октября 2026 г.
long 5 октября 2026 г.
medium 5 окт. 2026 г.
short 05.10.2026

Inglizcha xuddi shu sikl Monday, October 5, 2026, October 5, 2026, Oct 5, 2026, 10/5/26 beradi.

Ikkalasini birga ham berish mumkin:

const sana = new Date("2026-10-05T12:00:00Z");
const f = new Intl.DateTimeFormat("ru", {
  dateStyle: "long",
  timeStyle: "short",
  timeZone: "Asia/Tashkent",
});

console.log(f.format(sana));

Konsolda:

5 октября 2026 г. в 17:00

Ruscha "в" ni ham, inglizcha "at" ni ham (October 5, 2026 at 5:00 PM) CLDR o'zi qo'yadi. Siz faqat "uzun sana, qisqa vaqt" deysiz.

3.2 Tayyor uslub va qismlar aralashmaydi

dateStyle bilan birga month kabi alohida qism so'rasangiz:

new Intl.DateTimeFormat("ru", { dateStyle: "long", month: "long" });

TypeError: Invalid option : option

Tarjimasi: "Noto'g'ri sozlama: sozlama." Matn g'alati — V8 qaysi sozlama xato ekanini aytmaydi, Chrome ham, Node ham aynan shunday yozadi. Ma'nosi: tayyor uslub (dateStyle, timeStyle) va alohida qismlar (year, month, hour ...) — ikki xil usul, ularni bitta formatlovchida aralashtirib bo'lmaydi. Birini tanlang.

4. Qismlarni o'zingiz tanlash

4.1 Komponent sozlamalari

Tayyor uslub to'g'ri kelmasa — har qismni alohida so'raysiz:

Faqat so'ralgan qismlar chiqadi, tartib va tinish belgilarini esa til o'zi hal qiladi:

const sana = new Date("2026-10-05T12:00:00Z");
const sozlama = {
  weekday: "long",
  day: "numeric",
  month: "long",
  hour: "2-digit",
  minute: "2-digit",
  timeZone: "Asia/Tashkent",
};

console.log(new Intl.DateTimeFormat("ru", sozlama).format(sana));
console.log(new Intl.DateTimeFormat("en", sozlama).format(sana));

Konsolda:

понедельник, 5 октября в 17:00
Monday, October 5 at 05:00 PM

Biz yil so'ramadik — yil chiqmadi. Inglizchada soat 12 soatlik, "PM" bilan — bu AQSh odati.

4.2 12 yoki 24 soat: hourCycle

Soat formatini til belgilaydi: ruscha va o'zbekcha — 24 soat, inglizcha (en) — 12 soat. Uni majburan o'zgartirish mumkin:

const sana = new Date("2026-10-05T19:05:00Z");
const f = new Intl.DateTimeFormat("en", {
  hour: "2-digit",
  minute: "2-digit",
  hourCycle: "h23",
  timeZone: "Asia/Tashkent",
});

console.log(f.format(sana)); // 00:05

hourCycle: "h23" — soat 0 dan 23 gacha. "h12" — 1 dan 12 gacha, AM/PM bilan. Eski kodda hour12: false uchraydi — u ham 24 soatlik formatni so'raydi.

4.3 Zona nomi: timeZoneName

const sana = new Date("2026-10-05T12:00:00Z");

for (const tur of ["short", "long", "longOffset"]) {
  const f = new Intl.DateTimeFormat("en", {
    hour: "2-digit",
    minute: "2-digit",
    hourCycle: "h23",
    timeZoneName: tur,
    timeZone: "Asia/Tashkent",
  });
  console.log(f.format(sana));
}

Konsolda:

17:00 GMT+5
17:00 Uzbekistan Standard Time
17:00 GMT+05:00

Xalqaro mehmonga vaqtni ko'rsatganda zona nomi chalkashlikni yo'qotadi: "17:00 (GMT+5)" — "qaysi 17:00?" degan savol tug'ilmaydi.

Tekshirib ko'ring: { month: "short", day: "numeric" } sozlamasi ruscha formatlovchida nima chiqaradi — yil bormi?

5. timeZone — kompyuter zonasidan mustaqil

5.1 Bitta lahza — uch shahar

Date asoslari darsida va'da qilgandik: natijani kompyuter zonasidan qat'i nazar bir xil qilish yo'li bor. Mana u — timeZone sozlamasi:

const buyurtma = new Date("2026-10-05T12:00:00Z");
const zonalar = [
  "Asia/Tashkent", "Europe/Moscow", "America/New_York",
];

for (const zona of zonalar) {
  const f = new Intl.DateTimeFormat("ru", {
    dateStyle: "short",
    timeStyle: "short",
    timeZone: zona,
  });
  console.log(zona, f.format(buyurtma));
}

Konsolda:

Asia/Tashkent 05.10.2026, 17:00
Europe/Moscow 05.10.2026, 15:00
America/New_York 05.10.2026, 08:00

Bu kod Toshkentda ham, Nyu-Yorkda ham, UTC'dagi serverda ham aynan shu natijani beradi. getHours() dan farqi shunda. Nyu-Yorkdagi yozgi vaqtni ham Intl o'zi biladi — IANA bazasi ichida.

Endi «Bahor» uchun asosiy qoida: sana har doim timeZone: "Asia/Tashkent" bilan ko'rsatiladi. Mehmon Moskvada bo'lsa ham, unga bron vaqti choyxona soati bilan kerak.

5.2 Noto'g'ri zona

new Intl.DateTimeFormat("ru", { timeZone: "Toshkent" });

RangeError: Invalid time zone specified: Toshkent

Tarjimasi: "Noto'g'ri vaqt zonasi ko'rsatildi: Toshkent." Zona — IANA nomi bilan: Asia/Tashkent. Katta-kichik harfga esa qaramaydi: "asia/tashkent" ham ishlaydi. Qo'llanadigan barcha zonalar ro'yxati — Intl.supportedValuesOf("timeZone"): Node 24 da 418 ta.

5.3 Formatlovchi nimani tanladi: resolvedOptions

const f = new Intl.DateTimeFormat("ru", {
  hour: "numeric",
  minute: "2-digit",
  timeZone: "Asia/Tashkent",
});
const tanlangan = f.resolvedOptions();

console.log(tanlangan.locale, tanlangan.timeZone); // ru Asia/Tashkent
console.log(tanlangan.hourCycle); // h23

resolvedOptions() — formatlovchi aslida qaysi til, zona va soat formatini tanlaganini aytadi. Date va vaqt zonalari darsidagi Intl.DateTimeFormat().resolvedOptions().timeZone — foydalanuvchi zonasini bilish — shu metodning eng mashhur ishlatilishi.

6. formatToParts — o'z formatingiz

6.1 Natija bo'laklarda

Ba'zan tayyor natija yetmaydi: oy nomini qalin qilish, kunni alohida katakka qo'yish, o'z tartibingiz kerak. formatToParts satr o'rniga bo'laklar massivini qaytaradi:

const sana = new Date("2026-10-05T12:00:00Z");
const f = new Intl.DateTimeFormat("ru", {
  day: "numeric",
  month: "long",
  timeZone: "Asia/Tashkent",
});

console.log(f.formatToParts(sana));

Konsolda:

[
  { type: 'day', value: '5' },
  { type: 'literal', value: ' ' },
  { type: 'month', value: 'октября' }
]

Har bo'lakda type (nima ekani) va value (matni). literal — oraliq belgilar: bo'sh joy, nuqta, vergul. Bo'laklarni birlashtirsangiz, format natijasi chiqadi.

6.2 Bo'laklarni obyektga yig'ish

Bo'laklardan kerakli qismni nomi bilan olish uchun ularni obyektga aylantiramiz — Object.fromEntries bilan:

const toshkentQismlari = new Intl.DateTimeFormat("en-US", {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  hourCycle: "h23",
  timeZone: "Asia/Tashkent",
});

function qismlar(sana) {
  const bolaklar = toshkentQismlari.formatToParts(sana);
  return Object.fromEntries(bolaklar.map((b) => [b.type, b.value]));
}

const q = qismlar(new Date("2026-10-05T19:05:00Z"));
console.log(q.year, q.month, q.day); // 2026 10 6
console.log(q.hour, q.minute); // 00 05

UTC 19:05 — Toshkentda 6-oktabr, 00:05. Endi bizda Toshkentdagi yil, oy, kun va soat — kompyuter zonasidan qat'i nazar, istalgan zonada to'g'ri. Date va vaqt zonalari darsidagi "UTC + 5" hiylasi faqat DST'siz zonalar uchun edi. Bu usul esa har qanday zona uchun ishlaydi: timeZone ni almashtirish kifoya.

Nega en-US? Bu yerda bizga sonlar kerak, til emas. en-US sonlarni oddiy lotin raqamlarida beradi va har brauzerda bir xil. Ko'p literal bo'laklari obyektda bir-birini bosib ketadi — ular bizga kerak emas.

Tekshirib ko'ring: Nega qismlar funksiyasi ichida emas, tashqarida formatlovchi yaratildi?

7. formatRange — oraliq

7.1 Ish vaqti va bron kunlari

«Bahor» bron qabul qiladigan vaqt — 10:00 dan 22:00 gacha. Ikki sanani alohida formatlab, orasiga chiziqcha qo'yish mumkin. formatRange buni aqlliroq qiladi — takrorlanadigan qismlarni bir marta yozadi:

const boshi = new Date("2026-10-05T05:00:00Z");
const oxiri = new Date("2026-10-05T17:00:00Z");
const f = new Intl.DateTimeFormat("ru", {
  dateStyle: "medium",
  timeStyle: "short",
  timeZone: "Asia/Tashkent",
});

console.log(f.formatRange(boshi, oxiri));

Konsolda:

5 окт. 2026 г., 10:00–22:00

Sana ikkala uchida bir xil — u bir marta yozildi. Ko'p kunlik oraliq:

const kelish = new Date("2026-10-05T12:00:00Z");
const ketish = new Date("2026-10-12T12:00:00Z");
const sozlama = { dateStyle: "long", timeZone: "Asia/Tashkent" };

const ruscha = new Intl.DateTimeFormat("ru", sozlama);
const inglizcha = new Intl.DateTimeFormat("en", sozlama);

console.log(ruscha.formatRange(kelish, ketish));
console.log(inglizcha.formatRange(kelish, ketish));

Konsolda:

5–12 октября 2026 г.
October 5 – 12, 2026

Ruscha "5–12 октября", inglizcha "October 5 – 12" — har til oraliqni o'zicha yozadi. Bu qoidalarni o'zimiz yozsak, o'nlab if kerak bo'lardi.

Ikki sana bir xil bo'lsa, formatRange bitta sanani chiqaradi. formatRangeToParts ham bor — bo'laklarda qo'shimcha source maydoni ("boshi", "oxiri" yoki "umumiy") bo'ladi.

Tekshirib ko'ring: formatRange uchun nega dateStyle: "medium" va timeStyle: "short" bitta formatlovchiga berildi — ular aralashmaydi demaganmidik?

8. O'zbekcha: Node va Chrome farqi

8.1 Bir xil kod — ikki xil natija

Endi eng muhim bo'lim. Quyidagi kodni Node 24 da va Chrome 154 da ishga tushirdik:

const sana = new Date("2026-10-05T12:00:00Z");
const f = new Intl.DateTimeFormat("uz", {
  dateStyle: "full",
  timeZone: "Asia/Tashkent",
});

console.log(f.format(sana)); // dushanba, 5-oktabr, 2026

Node 24 — dushanba, 5-oktabr, 2026. Chrome 154 da esa — 2026 M10 5, Mon.

Bu xato emas, zaxira (fallback). Chrome — juda ko'p qurilmada ishlaydigan dastur. Uning hajmini kamaytirish uchun ICU ma'lumotlarining bir qismi olib tashlangan. Kompyuter uchun Chrome'da o'zbek lotin tilining sana ma'lumotlari yo'q. Ma'lumot topilmasa, Chrome "ildiz" (root) qoidasiga qaytadi: yil, M10 (10-oy), kun va inglizcha qisqa hafta kuni.

Saytdagi sahifa sizning brauzeringizda ishlaydi. Quyidagi blokni ishga tushiring — o'zingiz qaysi natijani ko'rasiz?

<script>
  const sana = new Date("2026-10-05T12:00:00Z");
  for (const til of ["uz", "ru", "en"]) {
    const f = new Intl.DateTimeFormat(til, {
      dateStyle: "long",
      timeZone: "Asia/Tashkent",
    });
    console.log(til, f.format(sana));
  }
</script>

Konsolda (Chrome 154, kompyuter):

uz 2026 M10 5
ru 5 октября 2026 г.
en October 5, 2026

Ruscha va inglizcha — Node bilan bir xil. Faqat o'zbekcha buzilgan.

8.2 To'liq farqlar jadvali

Biz uz, ru va en uchun asosiy sozlamalarni ikkala muhitda sinadik. Ruscha va inglizcha ma'no jihatdan hamma joyda bir xil chiqdi. Faqat ko'rinmas bo'sh joy belgilari farq qildi — masalan, inglizcha "PM" oldida Node tor uzilmas bo'sh joy qo'yadi, Chrome — oddiy bo'sh joy. O'zbekcha esa deyarli hamma joyda farq qildi:

Chrome ustuni — brauzer tili en-US bo'lganda. Zaxira ba'zi joylarda brauzer tiliga qaraydi: ruscha Chrome'da oxirgi qator Узбекистан, стандартное время bo'ladi, M10 va Mon esa o'zgarmaydi.

Yana ikki tuzoq bor. Birinchisi: Chrome resolvedOptions().locale da hamon "uz" deydi va Intl.DateTimeFormat.supportedLocalesOf(["uz"]) ham ["uz"] qaytaradi. Ya'ni "ma'lumot yo'q" degan rasmiy belgi yo'q. Shuning uchun ["uz", "ru"] kabi zaxira ro'yxati ham yordam bermaydi — Chrome uz ni "bor" deb tanlaydi.

Ikkinchisi: Node'dagi "O'zbekiston" so'zida apostrof o'rnida boshqa belgi turibdi — U+2018 (chap bir tirnoq). Jadvalda uni oddiy apostrof bilan yozdik. Pul va aniq hisob-kitob darsidagi soʻm dagi kabi: formatlangan matnni qo'lda yozilgan satr bilan solishtirmang.

Qiziq fakt: kirill yozuvidagi o'zbekcha — uz-Cyrl — Chrome'da ham to'liq ishlaydi va 5 октябр, 2026 beradi. Lekin bizning saytlarimiz lotin yozuvida.

8.3 Ma'lumot bormi — tekshirish

Rasmiy belgi yo'q, lekin natijaning o'zidan bilish mumkin: ma'lumot bo'lmasa, oy nomi o'rniga raqamli M10 chiqadi.

function oyNomlariBormi(til) {
  const f = new Intl.DateTimeFormat(til, { month: "long" });
  const oy = f.format(new Date(2026, 9, 15));
  return !/\d/.test(oy);
}

console.log(oyNomlariBormi("ru")); // true
console.log(oyNomlariBormi("uz")); // true

Node 24 da ikkalasi true. Chrome 154 da esa oyNomlariBormi("uz") — false: "M10" ichida raqam bor. \d — RegExp darslaridagi "istalgan raqam".

8.4 Ishonchli yechim: formatToParts + o'z oy nomlarimiz

O'zbekcha sanani hamma brauzerda bir xil chiqarishning eng sodda yo'li: raqamlarni Intl dan, so'zlarni o'zimizdan olish. Raqamlar — yil, oy, kun, soat — hamma joyda bir xil ishlaydi, chunki ular tilga bog'liq emas.

Quyidagi diagramma qaror tartibini ko'rsatadi:

flowchart TD
  A["Sanani ko'rsatish kerak"] --> B{"Qaysi til?"}
  B -->|"ru, en"| C["Intl.DateTimeFormat<br/>dateStyle, timeStyle"]
  B -->|"uz"| D["formatToParts<br/>faqat raqamlar, timeZone bilan"]
  D --> E["O'z OYLAR massivimiz"]
  E --> F["5-oktabr, 2026, 17:00"]
  C --> G["5 октября 2026 г. в 17:00"]

Kod:

const OYLAR = [
  "yanvar", "fevral", "mart", "aprel", "may", "iyun",
  "iyul", "avgust", "sentabr", "oktabr", "noyabr", "dekabr",
];
const toshkentQismlari = new Intl.DateTimeFormat("en-US", {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  hourCycle: "h23",
  timeZone: "Asia/Tashkent",
});

function uzSanaVaqt(sana) {
  const bolaklar = toshkentQismlari.formatToParts(sana);
  const juftlar = bolaklar.map((b) => [b.type, b.value]);
  const q = Object.fromEntries(juftlar);
  const oy = OYLAR[Number(q.month) - 1];
  return `${q.day}-${oy}, ${q.year}, ${q.hour}:${q.minute}`;
}

console.log(uzSanaVaqt(new Date("2026-10-05T12:00:00Z")));
console.log(uzSanaVaqt(new Date("2026-10-05T19:05:00Z")));

Konsolda:

5-oktabr, 2026, 17:00
6-oktabr, 2026, 00:05

Bu natijani Node 24 da ham, Chrome 154 da ham tekshirdik — bir xil. Oy nomlari bizning kodimizda, demak brauzer ma'lumotiga bog'liq emas. Zona Intl da — demak mehmon kompyuteri qayerda bo'lishi ahamiyatsiz. Number(q.month) - 1 — oy "10" satr bo'lib keladi, massiv esa 0 dan.

Boshqa yo'llar ham bor. Kutubxonaning o'z til ma'lumotlari: Temporal API va sana kutubxonalari darsidagi date-fns o'zbekcha nomlarni o'zi bilan olib keladi. Yoki ma'lumot yo'q bo'lsa, ruscha formatga o'tish. Lekin eng yengil va nazorat qilinadigani — yuqoridagi usul.

9. Qayta ishlatish: formatlovchini bir marta yarating

Date da qisqa yo'llar bor — toLocaleDateString, toLocaleTimeString, toLocaleString. Ular aynan shu til va sozlamalarni oladi:

const sana = new Date("2026-10-05T12:00:00Z");
const sozlama = { dateStyle: "long", timeZone: "Asia/Tashkent" };

const matn = sana.toLocaleDateString("ru", sozlama);

console.log(matn); // 5 октября 2026 г.

Bitta sana uchun bu qulay. Lekin har chaqiruvda ular ichida yangi formatlovchi yaratiladi. Ro'yxatda yuzlab sana bo'lsa, farq sezilarli. Biz 20 000 ta sanani uch usulda formatlab, vaqtni o'lchadik:

Ustunlarga qarang: formatlovchini qayta ishlatish o'nlab marta tez. Raqamlar mashinaga qarab o'zgaradi, nisbat esa saqlanadi. MDN ham shuni tavsiya qiladi: ko'p sanani formatlashda bitta Intl.DateTimeFormat yaratib, uning format metodini ishlating. O'lchashning o'zini Performansni o'lchash va benchmarking darsida o'rganamiz.

Amaliy qoida: formatlovchini modul darajasida, funksiyadan tashqarida, const bilan yarating — yuqoridagi toshkentQismlari kabi.

10. Ko'p uchraydigan xatolar

10.1 Til va zonani bermaslik

sana.toLocaleString() — kompyuter tili va zonasi. Sizda chiroyli, mehmonda boshqacha, serverda (UTC) — 5 soatga adashgan. Tuzatish: til va timeZone ni doim aniq bering.

10.2 Formatlangan matnni solishtirish yoki qaytarib o'qish

f.format(sana) === "5-oktabr, 2026" — Chrome'da false, Node'da ham ko'rinmas belgilar tufayli kutilmaganda false bo'lishi mumkin. new Date(f.format(sana)) — Invalid Date yoki boshqa sana. Tuzatish: formatlangan matn faqat ko'rsatish uchun. Saqlash va solishtirish — timestamp yoki ISO matn bilan.

10.3 dateStyle ni qismlar bilan aralashtirish

TypeError: Invalid option : option. Tuzatish: yoki tayyor uslub, yoki qismlar — bittasi.

10.4 Sikl ichida formatlovchi yaratish

for ichida new Intl.DateTimeFormat(...) yoki toLocaleString(...) — o'nlab marta sekin. Tuzatish: formatlovchini sikldan tashqarida bir marta yarating.

10.5 O'zbekchaga brauzer ma'lumotiga ishonish

Node'da sinab, "ishlayapti" deb chiqarilgan sayt Chrome'da 2026 M10 5 ko'rsatadi. Tuzatish: o'zbekcha matn uchun formatToParts + o'z nomlaringiz (yoki kutubxona). Va har doim haqiqiy brauzerda sinang.

11. Mashqlar

1-mashq (oson): Uch shahar soati

soatlar(sana) funksiyasi berilgan lahzani uch shahar uchun "Toshkent 17:00" ko'rinishidagi satrlar massivi qilib qaytarsin. Ishora: bitta timeStyle: "short" sozlamasi, ru til va har shahar uchun timeZone.

console.log(soatlar(new Date("2026-10-05T12:00:00Z")));
// [ 'Toshkent 17:00', 'Moskva 15:00', 'Dubay 16:00' ]

const SHAHARLAR = [
  ["Toshkent", "Asia/Tashkent"],
  ["Moskva", "Europe/Moscow"],
  ["Dubay", "Asia/Dubai"],
];

function soatlar(sana) {
  return SHAHARLAR.map(([nom, zona]) => {
    const f = new Intl.DateTimeFormat("ru", {
      timeStyle: "short",
      timeZone: zona,
    });
    return `${nom} ${f.format(sana)}`;
  });
}

console.log(soatlar(new Date("2026-10-05T12:00:00Z")));

[ 'Toshkent 17:00', 'Moskva 15:00', 'Dubay 16:00' ]

2-mashq (o'rta): Bron oralig'i ruscha

bronOraligi(boshiISO, oxiriISO) — ikki ISO lahzani olib, ruscha oraliqni Toshkent vaqtida qaytarsin. Bir kunda bo'lsa — sana bir marta. Ishora: dateStyle: "long", timeStyle: "short", formatRange.

const boshi = "2026-10-05T14:00:00Z";
console.log(bronOraligi(boshi, "2026-10-05T16:30:00Z"));
// 5 октября 2026 г., 19:00–21:30

const bronFormati = new Intl.DateTimeFormat("ru", {
  dateStyle: "long",
  timeStyle: "short",
  timeZone: "Asia/Tashkent",
});

function bronOraligi(boshiISO, oxiriISO) {
  const boshi = new Date(boshiISO);
  const oxiri = new Date(oxiriISO);
  return bronFormati.formatRange(boshi, oxiri);
}

const boshi = "2026-10-05T14:00:00Z";
console.log(bronOraligi(boshi, "2026-10-05T16:30:00Z"));

5 октября 2026 г., 19:00–21:30

3-mashq (qiyin): O'zbekcha hafta kuni bilan

«O'zbekcha: Node va Chrome farqi» bo'limidagi uzSanaVaqt ni kengaytiring: uzToliq(sana) hafta kunini ham qo'shsin — "dushanba, 5-oktabr, 17:00". Hafta kuni nomi brauzerga bog'liq bo'lmasin. Ishora: en-US formatlovchidan weekday: "short" bo'lagini oling ("Mon", "Tue" ...) va uni o'z nomlaringizga aylantiring — obyekt { Mon: "dushanba", ... }.

console.log(uzToliq(new Date("2026-10-05T12:00:00Z")));
// dushanba, 5-oktabr, 17:00
console.log(uzToliq(new Date("2026-10-10T20:30:00Z")));
// yakshanba, 11-oktabr, 01:30

const OYLAR = [
  "yanvar", "fevral", "mart", "aprel", "may", "iyun",
  "iyul", "avgust", "sentabr", "oktabr", "noyabr", "dekabr",
];
const KUNLAR = {
  Mon: "dushanba", Tue: "seshanba", Wed: "chorshanba",
  Thu: "payshanba", Fri: "juma", Sat: "shanba", Sun: "yakshanba",
};
const qismlarFormati = new Intl.DateTimeFormat("en-US", {
  weekday: "short",
  month: "numeric",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  hourCycle: "h23",
  timeZone: "Asia/Tashkent",
});

function uzToliq(sana) {
  const bolaklar = qismlarFormati.formatToParts(sana);
  const juftlar = bolaklar.map((b) => [b.type, b.value]);
  const q = Object.fromEntries(juftlar);
  const oy = OYLAR[Number(q.month) - 1];
  const kun = KUNLAR[q.weekday];
  return `${kun}, ${q.day}-${oy}, ${q.hour}:${q.minute}`;
}

console.log(uzToliq(new Date("2026-10-05T12:00:00Z")));
console.log(uzToliq(new Date("2026-10-10T20:30:00Z")));

dushanba, 5-oktabr, 17:00
yakshanba, 11-oktabr, 01:30

4-mashq: Vazifalar qadami — oxirgi o'zgarish vaqti

vazifalar ilovasiga hali sana qo'shmaymiz. Formatlashni alohida modulda tayyorlab qo'yamiz. kurs/mashqlar/12/14-intl/vaqt.mjs faylida vaqtniKorsat(timestamp, til) funksiyasini yozing: til "ru" yoki "en" bo'lsa — dateStyle: "medium", timeStyle: "short"; "uz" bo'lsa — 3-mashqdagi kabi o'z formatingiz (hafta kunisiz). Hamma holatda Toshkent vaqti. Formatlovchilar bir marta yaratilsin.

const vaqt = 1791210300000;
console.log(vaqtniKorsat(vaqt, "uz")); // 5-oktabr, 2026, 19:25

const OYLAR = [
  "yanvar", "fevral", "mart", "aprel", "may", "iyun",
  "iyul", "avgust", "sentabr", "oktabr", "noyabr", "dekabr",
];
const ZONA = "Asia/Tashkent";
const uslub = {
  dateStyle: "medium", timeStyle: "short", timeZone: ZONA,
};
const formatlar = {
  ru: new Intl.DateTimeFormat("ru", uslub),
  en: new Intl.DateTimeFormat("en", uslub),
};
const raqamlar = new Intl.DateTimeFormat("en-US", {
  year: "numeric", month: "numeric", day: "numeric",
  hour: "2-digit", minute: "2-digit", hourCycle: "h23",
  timeZone: ZONA,
});

function vaqtniKorsat(timestamp, til) {
  const sana = new Date(timestamp);
  if (til !== "uz") return formatlar[til].format(sana);
  const bolaklar = raqamlar.formatToParts(sana);
  const juftlar = bolaklar.map((b) => [b.type, b.value]);
  const q = Object.fromEntries(juftlar);
  const oy = OYLAR[Number(q.month) - 1];
  return `${q.day}-${oy}, ${q.year}, ${q.hour}:${q.minute}`;
}

const vaqt = 1791210300000;
for (const til of ["uz", "ru", "en"]) {
  console.log(til, vaqtniKorsat(vaqt, til));
}

uz 5-oktabr, 2026, 19:25
ru 5 окт. 2026 г., 19:25
en Oct 5, 2026, 7:25 PM

git add 12/14-intl/vaqt.mjs
git commit -m "12/14: Toshkent vaqtini uz/ru/en tillarida formatla"

12. Real ishda

• Ko'p tilli saytlar. O'zbekistondagi xizmatlar odatda uch tilda: o'zbek, rus, ingliz. Sana va vaqt Intl bilan, o'zbekcha uchun esa — o'z nomlar yoki kutubxona ma'lumoti bilan. i18n (ko'p tillilik) kutubxonalari ham ichida Intl ni ishlatadi — ularni React (17-qismdan) bilan ishlaganda uchratasiz.
• Zona — biznes qoidasi. Bron, yetkazib berish, ish vaqti — biznes qaysi shaharda bo'lsa, o'sha zona bilan ko'rsatiladi. Xalqaro uchrashuvlar — foydalanuvchi zonasida, zona nomi bilan.
• Testlar. Formatlangan matnni testda qo'lda yozilgan satr bilan solishtirish — ICU yangilanganda buziladigan test. formatToParts natijasidagi raqamlarni tekshirish ishonchliroq.
• Intervyu. "toLocaleString va Intl.DateTimeFormat farqi?", "Sanani foydalanuvchi zonasida qanday ko'rsatasiz?", "Nega formatlovchini qayta ishlatish kerak?" — tez-tez so'raladi.

Xulosa

• new Intl.DateTimeFormat(til, sozlamalar).format(sana) — sanani til qoidalari bo'yicha satrga aylantiradi; til belgisini doim aniq bering.
• Ikki usul: tayyor uslub (dateStyle, timeStyle) yoki qismlar (weekday, month, hour, hourCycle, timeZoneName) — aralashtirilmaydi.
• timeZone: "Asia/Tashkent" — natija kompyuter zonasiga bog'liq bo'lmaydi; resolvedOptions() — tanlangan til va zona.
• formatToParts — bo'laklar (o'z formatingiz uchun), formatRange — oraliq ("10:00–22:00").
• Chrome 154 da uz lotin ma'lumoti yo'q (2026 M10 5), lekin u buni rasman aytmaydi; o'zbekcha uchun — formatToParts raqamlari + o'z nomlaringiz.
• Formatlovchini bir marta yarating va qayta ishlating — o'nlab baravar tez.

Keyingi dars: Intl.RelativeTimeFormat — "3 kun oldin", "ertaga", "5 daqiqadan keyin" kabi nisbiy vaqtni har tilda to'g'ri chiqarish.

Manbalar

• MDN: "Intl.DateTimeFormat", "Intl.DateTimeFormat() constructor" (options), "formatToParts", "formatRange", "resolvedOptions" — developer.mozilla.org
• ECMA-402 (ECMAScript Internationalization API Specification), "DateTimeFormat Objects" — tc39.es/ecma402
• BCP 47 "Tags for Identifying Languages" — rfc-editor.org/info/bcp47
• Unicode CLDR — cldr.unicode.org