Форматування дат через Intl.DateTimeFormat

new Intl.DateTimeFormat(locales, options)

const date = new Date("2026-07-26T15:30:00Z");

console.log(new Intl.DateTimeFormat("uk-UA").format(date));
console.log(new Intl.DateTimeFormat("en-US").format(date));
console.log(new Intl.DateTimeFormat("de-DE").format(date));

const formatter = new Intl.DateTimeFormat([
  "uk-UA",
  "pl-PL",
  "en-US"
]);

console.log(formatter.format(new Date()));

const formatter = new Intl.DateTimeFormat();

const formatter = new Intl.DateTimeFormat(
  navigator.languages,
  { dateStyle: "long" }
);

const date = new Date("2026-07-26T15:30:45Z");

const formatter = new Intl.DateTimeFormat("uk-UA", {
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit"
});

console.log(formatter.format(date));

const date = new Date("2026-07-26T15:30:00Z");

console.log(new Intl.DateTimeFormat("uk-UA", {
  year: "numeric"
}).format(date));

console.log(new Intl.DateTimeFormat("uk-UA", {
  year: "2-digit"
}).format(date));

const date = new Date("2026-07-26T15:30:00Z");

for (const month of [
  "numeric",
  "2-digit",
  "long",
  "short",
  "narrow"
]) {
  const formatter = new Intl.DateTimeFormat("uk-UA", {
    month
  });

  console.log(month, formatter.format(date));
}

const date = new Date("2026-07-26T15:30:00Z");

const formatter = new Intl.DateTimeFormat("uk-UA", {
  weekday: "long",
  day: "numeric",
  month: "long",
  year: "numeric"
});

console.log(formatter.format(date));
// неділя, 26 липня 2026 р.

const date = new Date("2026-07-26T15:30:45.123Z");

const formatter = new Intl.DateTimeFormat("uk-UA", {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  fractionalSecondDigits: 3,
  timeZone: "UTC"
});

console.log(formatter.format(date));

const date = new Date("2026-07-26T15:30:00Z");

const twelveHourFormatter = new Intl.DateTimeFormat("en-US", {
  hour: "numeric",
  minute: "2-digit",
  hour12: true,
  timeZone: "UTC"
});

const twentyFourHourFormatter = new Intl.DateTimeFormat("uk-UA", {
  hour: "2-digit",
  minute: "2-digit",
  hour12: false,
  timeZone: "UTC"
});

console.log(twelveHourFormatter.format(date));
console.log(twentyFourHourFormatter.format(date));

const date = new Date("2026-07-26T15:30:00Z");

const formatter = new Intl.DateTimeFormat("en-US", {
  hour: "numeric",
  dayPeriod: "long",
  timeZone: "UTC"
});

console.log(formatter.format(date));

const date = new Date("2026-07-26T15:30:45Z");

const styles = ["full", "long", "medium", "short"];

for (const dateStyle of styles) {
  const formatter = new Intl.DateTimeFormat("uk-UA", {
    dateStyle,
    timeZone: "UTC"
  });

  console.log(dateStyle, formatter.format(date));
}

const formatter = new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "long",
  timeStyle: "short",
  timeZone: "Europe/Kyiv"
});

console.log(formatter.format(new Date("2026-07-26T15:30:00Z")));

// Неправильно: не поєднуйте dateStyle з year або month.
new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "long",
  year: "numeric"
});

const instant = new Date("2026-07-26T15:30:00Z");

const zones = [
  "UTC",
  "Europe/Kyiv",
  "America/New_York",
  "Asia/Tokyo"
];

for (const timeZone of zones) {
  const formatter = new Intl.DateTimeFormat("uk-UA", {
    dateStyle: "full",
    timeStyle: "short",
    timeZone
  });

  console.log(`${timeZone}: ${formatter.format(instant)}`);
}

const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

console.log(userTimeZone);

const date = new Date("2026-07-26T15:30:00Z");

const formatter = new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "medium",
  timeStyle: "short",
  timeZoneName: "short",
  timeZone: "Europe/Kyiv"
});

console.log(formatter.format(date));

const date = new Date("2026-07-26T15:30:00Z");

const gregorian = new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "long",
  calendar: "gregory",
  timeZone: "UTC"
});

const japanese = new Intl.DateTimeFormat("ja-JP", {
  dateStyle: "long",
  calendar: "japanese",
  timeZone: "UTC"
});

console.log(gregorian.format(date));
console.log(japanese.format(date));

const date = new Date("2026-07-26T15:30:00Z");

const formatter = new Intl.DateTimeFormat("ar-EG", {
  dateStyle: "long",
  numberingSystem: "arab",
  timeZone: "UTC"
});

console.log(formatter.format(date));

const formatter = new Intl.DateTimeFormat("ar-EG-u-nu-arab", {
  dateStyle: "long",
  timeZone: "UTC"
});

const date = new Date("2026-07-26T15:30:45Z");

const formatter = new Intl.DateTimeFormat("uk-UA", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  timeZone: "UTC"
});

const parts = formatter.formatToParts(date);

console.log(parts);

[
  { type: "weekday", value: "неділя" },
  { type: "literal", value: ", " },
  { type: "day", value: "26" }
  // ...
]

const dayPart = parts.find(part => part.type === "day");
const monthPart = parts.find(part => part.type === "month");

console.log(dayPart?.value);
console.log(monthPart?.value);

const parts = new Intl.DateTimeFormat("uk-UA", {
  day: "numeric",
  month: "long",
  year: "numeric",
  timeZone: "UTC"
}).formatToParts(new Date("2026-07-26T15:30:00Z"));

const html = parts.map(({ type, value }) => {
  if (type === "day") {
    return `<strong>${value}</strong>`;
  }

  return value;
}).join("");

console.log(html);

const formatter = new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "long",
  timeZone: "UTC"
});

const start = new Date("2026-07-26T00:00:00Z");
const end = new Date("2026-07-30T00:00:00Z");

console.log(formatter.formatRange(start, end));

const parts = formatter.formatRangeToParts(start, end);

console.log(parts);

const formatter = new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "medium",
  timeStyle: "short",
  timeZone: "Europe/Kyiv"
});

const dates = [
  new Date("2026-07-26T10:00:00Z"),
  new Date("2026-07-27T12:30:00Z"),
  new Date("2026-07-28T18:45:00Z")
];

for (const date of dates) {
  console.log(formatter.format(date));
}

// Менш ефективно для великої кількості дат.
for (const date of dates) {
  const text = new Intl.DateTimeFormat("uk-UA", {
    dateStyle: "medium",
    timeZone: "UTC"
  }).format(date);

  console.log(text);
}

const formatter = new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "long",
  timeStyle: "short",
  timeZone: "Europe/Kyiv"
});

console.log(formatter.resolvedOptions());

const utcDate = new Date("2026-07-26T15:30:00Z");
const offsetDate = new Date("2026-07-26T15:30:00+03:00");

const serverValue = "2026-07-26T15:30:00Z";
const date = new Date(serverValue);

const formatter = new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "long",
  timeStyle: "short",
  timeZone: "Europe/Kyiv"
});

console.log(formatter.format(date));

// Небажаний підхід.
const date = new Date();
const text = `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;

console.log(text);

const text = new Intl.DateTimeFormat("uk-UA", {
  dateStyle: "short"
}).format(new Date());

console.log(text);

const date = new Date("2026-07-26T15:30:00Z");

console.log(new Intl.DateTimeFormat("uk-UA", {
  timeStyle: "short",
  timeZone: "UTC"
}).format(date));

console.log(new Intl.DateTimeFormat("uk-UA", {
  timeStyle: "short",
  timeZone: "Europe/Kyiv"
}).format(date));

const formatter = new Intl.DateTimeFormat("uk-UA", {
  year: "numeric",
  month: "long",
  day: "numeric",
  timeZone: "UTC"
});

console.log(formatter.format(date));

// Така перевірка крихка.
if (formatter.format(date) === "26 липня 2026 р.") {
  // ...
}

// Ненадійно: скорочення можуть бути неоднозначними.
timeZone: "CST"

timeZone: "America/Chicago"

const date = new Date("not a date");

console.log(date.toString());

const formatter = new Intl.DateTimeFormat("uk-UA");

// Для невалідної дати форматування завершиться помилкою.
console.log(formatter.format(date));

if (Number.isNaN(date.getTime())) {
  throw new Error("Отримано невалідну дату");
}

function formatEventDate(value, locale, timeZone) {
  const date = new Date(value);

  if (Number.isNaN(date.getTime())) {
    throw new Error("Невалідне значення дати");
  }

  const formatter = new Intl.DateTimeFormat(locale, {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    timeZone,
    timeZoneName: "short"
  });

  return formatter.format(date);
}

const eventDate = "2026-07-26T15:30:00Z";

console.log(
  formatEventDate(eventDate, "uk-UA", "Europe/Kyiv")
);

console.log(
  formatEventDate(eventDate, "en-US", "America/New_York")
);

// Коротка дата.
{
  dateStyle: "short"
}

// Читабельна дата.
{
  dateStyle: "long"
}

// Дата з повною назвою дня тижня.
{
  dateStyle: "full"
}

// Час із секундами.
{
  timeStyle: "medium"
}

// Дата та час.
{
  dateStyle: "medium",
  timeStyle: "short"
}

// Власна комбінація компонентів.
{
  day: "2-digit",
  month: "2-digit",
  year: "numeric",
  hour: "2-digit",
  minute: "2-digit"
}