Dátumkezelés JavaScript-ben: Javascript Date() objektum

A dátum kezelése alapvető fontosságú, írjuk bármely területre, feladatra is a kódunkat! Következzen a JavaScript dátum definíciója és a 3 legfontosabb metódus, példákkal.

Javascript dátum – amit tudni érdemes róla

Sokoldalúan használhatjuk a JavaScript dátumkezelést weboldalon, határidő kiszámításához, eltelt napok számításához, stb. Lássuk!

A Date() egy JavaScript objektum, az object objektum és a tömb array mellett.

A JavaScript naptár kezdő dátuma 1970. január 1. A kezdődátum napján a dátum típusú változó/konstans értéke 0, azaz nulla. Minden további dátum változó vagy konstans értéke a kezdő dátumhoz képest eltelt milliszekundumok száma.

A JavaScript dátum definiálása

Dátumot alapvetően 3 módon definiálhatunk, Date() objektumhoz:

Megadjuk hozzá az évszámot, hónapot, napot:
const datum = new Date(2024, 02, 13); – amely egyenértékű a 2024.02.13 dátummal.
1. az év számát 2 vagy 4 karakteren lehet megadni,
  ha 2000-s dámot szeretnénk megadni, akkor az évet 4 számjeggyel adjuk meg, egyébként a 2 karakterrel megadott évszám 1900-s évként kerül értelmezésre,
  Pl.: const datum = new Date(24, 02, 13); – eredménye az 1924.02.13 dátumot eredményez.
2. Megadhatjuk a dátumot 2 számmal is, ez esetben a dátum év – hó adatot tartalmaz, pl: const datum = new Date(24, 02); – eredménye az 1924.02.01 dátumot eredményez.
3. Megadhatjuk a dátumot egyetlen számmal is, ez esetben a dátum csupán az év számát tartalmazza: két számjeggyel 1900-s évet, 4 számjeggyel a pontos évet
  pl.: const datum = new Date(24); – eredménye az 1924.01.01 dátumot eredményez.
4. A hónap számát 0-tól – azaz nullától kezdve – kell megadni, azaz a január a 0. hónap, a december pedig a 11. hónap.
  pl.: const datum = new Date(24,0,15); – eredménye az 1924.01.15 dátumot eredményez.
5. Ha több paramétert-, azaz több mint 3 számot adunk meg a Date() zárójelei között, vesszővel elválasztva egymástól, akkor a dátum tartalmaz időértéket is, a sorrend szerint órákat, perceket és másodperceket. Ez azt jelenti, hogy 6 paramétert értelmez a Date().
Megadjuk a kívánt dátumot millisecondumokban (ms), az 1970. január 01-hez képest:
const datum = new Date(1000000000); – azaz 1000 millió ms = 1970. január 12. dátumot eredményez.
1. A definíciónál értelmezett a negatív érték megadása is: ezzel tudjuk elérni az 1970.január 1. előtti dátumokat. pl: const datum = new Date(-1000000000); – azaz a -1000 millió ms = 1969. december 20.
2. A Date() zárójelei közé akár matematikai műveletet is írhatunk, például így adhatunk meg egy-, a kezdő dátumot követő 24. órát: const datum = new Date(24*60*60*1000); az értelmezése: 24 óra = 24 *60 perc, 1 perc = 60 másodperc, 1 másodperc 1000 milliszekundum, azaz 24 óra = 1 nap = 86 400 000 milliszekundum, tehát ezt is írhatjuk const datum = new Date(86400000);
A dátumot szövegesen adjuk meg, ebben az esetben stringként, dupla idézőjelek között, pl. a 2024 utolsó napja:
const datum = new Date(„2024-12-31”); ISO formátumban ’’YYYY-MM-DD” formátumban, ez az alapértelmezett bevitel
const datum = new Date(„12/31/2024”); Rövid dátumként ’’DD-MM-YYYY” formátumban (Short date) vagy
const datum = new Date(„Dec 31 2024”); Hosszú dátumként „MMM DD YYYY” formátumban (Long date)
megjegyzés: a formátumnál az év számát 4 karakteren YYYY, a hónapot 2 karakteren MM, míg a napot 2 karakteren DD jelöli.
Plusz egy eset: amikor nem adunk meg egyáltalán paramétert a Date() objektum definiálásánál:
var datum = new Date(); -a változónak az aktuális dátumot adja, az aktuális időzóna szerint.

A következő kóddal kipróbálhatjuk a lehetőségeinket a dátummal, ha a dátum definíciójánál-, az aktuális dátum helyett, a zárójelek között definiálunk más dátumokat, a fent leírtak szerint. Pl.: const datum = new Date(15,3);

Legjobb, ha minden előfordulható dátum definíciót kipróbálunk.

Példa:

<!DOCTYPE html>
  <html>
    <body>

      <h1>Dátum definíciójának tesztje</h1>
      <p>A Date() paramétereivel</p>
      <p id="proba"></p>

      <script>
        const datum = new Date();
        document.getElementById("proba").innerHTML = datum;
        window.alert("A dátum: " + datum);
      </script>

    </body>
  </html>
Code language: HTML, XML (xml)

3 fontos JavaScript dátum method, metódus

A Date() objektumhoz sok metódus létezik. Ezek közül a 3 legfontosabbat mutatjuk meg.

1. toString() és toDateString metódusok

A JavaScript alapértelmezett módon a dátumot a toString() metódussal láttatja, a dátumot kiegészítve az időzónával:

const datum = new Date();
document.getElementById("proba").innerHTML = datum.toString();
Code language: JavaScript (javascript)

Eredmény:

Ha a toString() metódus helyett a toDateString() metódust használjuk, akkor az előző kód kimentéből a dátum marad egy más formátumban, időzóna nélkül.

const datum = new Date();
document.getElementById("proba").innerHTML = datum.toDateString();
Code language: JavaScript (javascript)

Eredmény:

2. JavaScript get dátum metódusok

A get metódusok hozzáférést engednek a dátum egyes részeihez. Mindennapos feladat, hogy szükségünk van egy dátum változó vagy konstans éveinek számára, például, hogy megállapítsuk, hogy melyik hónap van.

Ha az évek számára van szükségünk, akkor getFullYear() metódust használhatjuk:

<p id="proba"></p>
<script>
  const datum = new Date(34,6,5);
  var evek = datum.getFullYear();
  document.getElementById("proba").innerHTML = "Évek száma: " + evek;
</script>
Code language: HTML, XML (xml)

Ha a hónap számára van szükségünk, akkor getMonth() metódust használhatjuk:

const datum = new Date("2024-02-15");
var honap = datum.getMonth() + 1;  //emlékeztetőül: a hónapok száma éven belül, 0-tól kezdődik
document.getElementById("proba").innerHTML = "Hónap száma: " + honap;
Code language: JavaScript (javascript)

3. Javascript set dátum metódus

A metódus segítségével a dátum valamely részét tudjuk át írni.

Például csak az évek számát a datum változóban:

var datum = new Date(); // az aktuális dátum értékét kapja,
datum.setFullYear(2000); // az aktuális dátum évét 2000-re változtatja át.
Code language: JavaScript (javascript)

Ha az aktuális dátum 2024.02.15 volt, akkor a datum változó dátuma a setFullYear(2000) után 2000.02.15 lesz.

Ha a hónapot írnánk át, módosítanánk, akkor használjuk a setMonth() metódust:

var datum = new Date(); // az aktuális dátum értékét kapja,
datum.setMonth(11); //a datum értékét átállítja a 2024.12.15-re, amikor az aktuális dátum 2024.02.15 
Code language: JavaScript (javascript)

Ha a nap számát szeretnénk átírni a dátumban, akkor használjuk a set.Date() metódust:

var datum = new Date(); // az aktuális dátum értékét kapja,
datum.setDate(10); // a datum értékét átállítja a 2024.02.10-re, amikor az aktuális dátum 2024.02.15
Code language: JavaScript (javascript)

Az óra, perc, másodperc átírásához használhatjuk a setHours(), setMinutes() és setSeconds() metódusokat, a dátum részeit beállító metódusokhoz hasonlóan, pl.: délre állítja át az amúgy idő pont nélküli-, 0-s időpontot.

var datum = new Date();
datum.setHours(12);
Code language: JavaScript (javascript)

A dátum objektum set metódusának érdekessége, hogy a zárójelek közé, a konstans paraméter helyén, megadhatunk műveleteket is. Például, ha a napok számát növelni akarnánk 100-zal:

var datum = new Date(); // az aktuális dátum értékét kapja,
datum.setDate(datum.getDate() + 100); //a datum új értéke 2024.május 25 lesz, ha az aktuális dátum 2024.02.15 volt(2024.02.15 + 100nap)
Code language: JavaScript (javascript)

A Date() valamennyi metódusa ezen a linken érhető el.

A metódusok lényegesen megkönnyítik a munkánkat a dátumokkal: határidő számítás, eltelt idő számításánál, életkor számításnál stb. Ez utóbbit például így oldhatnánk meg (nem törődve vele, hogy most betöltötte az életkort vagy majd idén fogja betölteni):

<!DOCTYPE html>
  <html>
    <body>
      <h2>JavaScript Életkor kiszámítása</h2>
      <p id="proba"></p>

      <script>
        const szdatum = new Date("1990-07-21");
        var ma = new Date();
        var kor = ma.getFullYear(ma) - szdatum.getFullYear(szdatum);
        document.getElementById("proba").innerHTML = "Életkor: " + kor + " éves, aki " + szdatum.toDateString() + "-ban született és ma van " + ma.toDateString();
      </script>
    </body>
  </html>
Code language: HTML, XML (xml)

A kiírás egy kerek mondat, amelyben már csak a dátumot kellene megformázni és megjeleníteni a magyar írásmód szerint. Ezt látjuk, ez az eredménye a fenti kódnak:

vpfdN0Zq1wHbM7FXOWD E5044U YMYhzeLNiWIN8FyrvSULnwTiF68rt4 cZK2Y5Tdjn UwJYLsMP1Rm6YPcY

Próbáljuk meg használatba venni azt a metódust, amellyel a dátumot helyi írásmód szerint formázhatjuk:
.toLocaleDateString()

A kód:

<!DOCTYPE html>
  <html>
    <body>
      <h2>JavaScript Életkor kiszámítása</h2>
      <p id="proba"></p>

      <script>
        const szdatum = new Date("1990-07-21");
        var ma = new Date();
        var szdmo = szdatum.toLocaleDateString();
        var mamo = ma.toLocaleDateString();
        var kor = ma.getFullYear(ma) - szdatum.getFullYear(szdatum);

        document.getElementById("proba").innerHTML = "Életkor: " + kor + " éves, aki " + szdmo + "-n született és ma van " + mamo;
      </script>
    </body>
  </html>
Code language: HTML, XML (xml)

A .toLocaleDateString() a dátumot átalakítja stringgé és mivel még számolni szeretnénk a dátummal, ezért új változót készítettünk a sztringgé alakított dátumhoz. Az eredmény már szinte tökéletes, ám a kísérő szöveget kissé módosítanunk kellett, hogy jól olvasható legyen az eredmény szövege: