Pole date i pułapka stref czasowych

Timery i daty - JavaScript na stronach WWW (HTML/CSS/JS)

Pole `type="date"` zwraca napis `2026-11-13`. `new Date('2026-11-13')` czyta go jako północ czasu UTC, więc w strefie na zachód od Greenwich to jeszcze poprzedni dzień, a `getDate()` może dać 12. Bezpiecznie jest rozbić napis i zbudować datę lokalną `new Date(y, m - 1, d)`. Funkcje `parseDate` i `formatDate` przydadzą się w zadaniach.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Pole date</title>
  <style>
    body { font-family: sans-serif; max-width: 36em; line-height: 1.4; }
    input, select, button, textarea { font: inherit; padding: 0.2em 0.4em; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 0.2em 0.6em; }
  </style>
</head>
<body>
  <input id="date" type="date" value="2026-11-13">
  <pre id="out"></pre>
  <script>
    const DAYS = ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota'];
    // "2026-11-13" -> data o północy czasu lokalnego (new Date(napis) liczy w UTC)
    function parseDate(text) {
      const [y, m, d] = text.split('-').map(Number);
      return new Date(y, m - 1, d);
    }

    function formatDate(date) {
      const dd = String(date.getDate()).padStart(2, '0');
      const mm = String(date.getMonth() + 1).padStart(2, '0');
      return `${dd}.${mm}.${date.getFullYear()}`;
    }
    const field = document.getElementById('date');
    function show() {
      const utc = new Date(field.value);
      const local = parseDate(field.value);
      document.getElementById('out').textContent = [
        'napis z pola: ' + field.value,
        'new Date(napis), godzina lokalna: ' + utc.getHours() + ':00, dzień ' + utc.getDate(),
        'parseDate(napis): ' + formatDate(local) + ', ' + DAYS[local.getDay()],
      ].join('\n');
    }
    field.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript na stronach WWW·Zaloguj się, aby zapisać postęp na koncie.