Format daty i czasu

Otwórz swoją konsolę w przeglądarce.

Przejdź do artykułu

Otwórz konsolę przeglądarki aby zobaczyć działanie formatowania daty i czasu. Otwieranie konsoli w przeglądarkach

Kod użyty w przykładzie.

Pokaż kod JavaScript
{
  console.log(
    "%cOgólne formatowanie daty i czasu",
    "font-size: 18px; padding: 15px 0;"
  );
  console.log("%cPrzykład 1", "display: block; margin-top: 5px;");
  const formatBasicA = new Intl.DateTimeFormat("pl-PL", {
    dateStyle: "full",
    timeStyle: "medium",
  });
  console.log(formatBasicA.format(new Date()));

  console.log("%cPrzykład 2", "display: block; margin-top: 5px;");
  const formatBasicB = new Intl.DateTimeFormat("en-US", {
    dateStyle: "full",
    timeStyle: "long",
  });
  console.log(formatBasicB.format(new Date()));

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );

  console.log(
    "%cDokładniejsze formatowanie daty",
    "font-size: 18px; padding: 15px 0;"
  );
  console.log("%cPrzykład 1", "display: block; margin-top: 5px;");
  const formatDateA = new Intl.DateTimeFormat(undefined, {
    year: "numeric",
    month: "2-digit",
    day: "numeric",
  });
  console.log(formatDateA.format(new Date()));

  console.log("%cPrzykład 2", "display: block; margin-top: 5px;");
  const formatDateB = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "numeric",
  });
  console.log(formatDateB.format(new Date()));

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );

  console.log(
    "%cDokładniejsze formatowanie czasu",
    "font-size: 18px; padding: 15px 0;"
  );
  console.log("%cPrzykład 1", "display: block; margin-top: 5px;");
  const formatTimeA = new Intl.DateTimeFormat(undefined, {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
  console.log(formatTimeA.format(new Date()));

  console.log("%cPrzykład 2", "display: block; margin-top: 5px;");
  const formatTimeB = new Intl.DateTimeFormat(undefined, {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    weekday: "long",
    timeZone: "Europe/Warsaw",
    timeZoneName: "short",
  });
  console.log(formatTimeB.format(new Date()));

  console.log(
    "%c-----------------------------------------------------------------------",
    "display: block; margin: 5px 0; color: #7f8c8d; font-size: 16px;"
  );

  console.log(
    "%cRelatywne formatowanie daty",
    "font-size: 18px; padding: 15px 0;"
  );

  console.log("%cPrzykład 1", "display: block; margin-top: 5px;");
  const formatRelativeA = new Intl.RelativeTimeFormat(undefined, {
    localeMatcher: "best fit",
    numeric: "always",
    style: "short",
  });
  console.log(formatRelativeA.format(-1, "day"));

  console.log("%cPrzykład 2", "display: block; margin-top: 5px;");
  const formatRelativeB = new Intl.RelativeTimeFormat(undefined, {
    localeMatcher: "best fit",
    numeric: "always",
    style: "narrow",
  });
  console.log(formatRelativeB.format(-100, "day"));
  console.log(formatRelativeB.format(-10, "month"));
  console.log(formatRelativeB.format(-1, "year"));
}