`Date`-object

Dit artikel legt het Date-object uit.

We leggen het Date-object stap voor stap uit, van de basismechanismen tot veelgebruikte bewerkingen in de praktijk, aan de hand van concrete voorbeelden.

YouTube Video

Date-object

Wat is het Date-object?

Het JavaScript Date-object is een standaardobject voor het werken met datums en tijden. Intern beheert het datums en tijden op basis van het aantal milliseconden sinds 1 januari 1970, 00:00:00 UTC.

Laten we eerst een Date-object maken dat de huidige datum en tijd weergeeft, en de inhoud ervan controleren.

1const now = new Date();
2console.log(now);

• Deze code maakt een Date-object aan dat de huidige datum en tijd vertegenwoordigt op het moment van uitvoering. Het weergaveformaat is afhankelijk van de uitvoeringsomgeving, zoals de browser of het besturingssysteem.

Hoe maak je een Date-object aan

Date-objecten kunnen op verschillende manieren worden aangemaakt, afhankelijk van je behoeften. Een bijzonder belangrijk en vaak fout gemaakt punt is dat het constructorargument voor maand bij nul begint, wat betekent dat maanden bij 0 beginnen.

1const d1 = new Date();                     // Current date and time
2const d2 = new Date("2025-01-01");         // Create from an ISO date string
3const d3 = new Date(2025, 0, 1);           // January 1, 2025 (month is zero-based)
4const d4 = new Date(2025, 0, 1, 10, 30);   // January 1, 2025, 10:30
5
6console.log(d1, d2, d3, d4);

• In new Date(year, month, day) betekent month dat 0 januari is en 11 december. Als je deze specificatie niet begrijpt, kun je per ongeluk een datum maken die een maand verschilt, dus wees altijd voorzichtig.

Elk onderdeel van datum en tijd opvragen

Je kunt het jaar, de maand, de dag, de tijd en de weekdag afzonderlijk ophalen uit een Date-object. Alle getter-methoden geven de waarden als getallen terug.

1const date = new Date();
2
3console.log(date.getFullYear()); // Year
4console.log(date.getMonth());    // Month (0-based: 0 = January)
5console.log(date.getDate());     // Day of the month
6console.log(date.getHours());    // Hours
7console.log(date.getMinutes());  // Minutes
8console.log(date.getSeconds());  // Seconds
9console.log(date.getDay());      // Day of the week (0 = Sunday, 6 = Saturday)

• Net als bij het aanmaken, wees voorzichtig dat getMonth() ook bij nul begint. Bij het weergeven is het gebruikelijk om er 1 bij op te tellen om de waarde aan te passen.
• getDay() retourneert de dag van de week als een getal. 0 staat voor zondag, en 6 staat voor zaterdag.

Datums en tijden aanpassen

Date is een veranderlijk (mutable) object, wat betekent dat je de waarden later kunt wijzigen. Deze eigenschap is handig, maar je moet opletten voor onbedoelde bijwerkingen.

Je kunt set-methoden gebruiken om de waarden van een bestaand Date-object te wijzigen.

1const date = new Date("2025-01-01");
2
3date.setFullYear(2026);
4date.setMonth(5);   // June
5date.setDate(15);
6
7console.log(date);

• setMonth() begint ook bij nul. Het originele object wordt direct aangepast.

Datums optellen en aftrekken

Het is gebruikelijk om datumcalculaties uit te voeren met milliseconden of met setDate(). Voor dag-gebaseerde berekeningen is gebruik van setDate() bijzonder intuïtief en veilig.

1const date = new Date("2025-01-01");
2
3date.setDate(date.getDate() + 7);
4console.log(date);

• In dit voorbeeld berekenen we de datum die 7 dagen na de opgegeven datum ligt. Zelfs als de optelling overloopt naar een nieuwe maand, wordt dit automatisch aangepast.

Date-objecten vergelijken

Date-objecten kunnen als getallen vergeleken worden. Dit komt omdat de interne millisecondenwaarde wordt vergeleken.

1const a = new Date("2025-01-01");
2const b = new Date("2025-01-10");
3
4console.log(a < b);   // true
5console.log(a > b);   // false

• Als je de volgorde van datums wilt bepalen, is geen extra conversie nodig. Je kunt direct vergelijkingsoperatoren gebruiken.

Werken met tijdstempels (milliseconden)

Date kan worden omgezet naar en vanuit getallen die milliseconden (tijdstempels) voorstellen. Dit formaat wordt vaak gebruikt in API's of database-integraties.

1const now = Date.now();
2console.log(now);
3
4const date = new Date(now);
5console.log(date);

• Date.now() geeft de huidige tijd in milliseconden terug. Dit is zeer handig wanneer je de waarde als getal wilt opslaan of vergelijken.

Datums als tekenreeksen formatteren

Een Date direct weergeven levert vaak een formaat op dat mogelijk niet aan je wensen voldoet. Daarom moet je het expliciet formatteren volgens je eigen wensen.

1const date = new Date("2025-01-01");
2
3const formatted = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
4console.log(formatted);

• Door het handmatig zo te formatteren, heb je volledige controle over het weergaveformaat. In de praktijk worden hier vaak bibliotheken voor gebruikt.

Verschil tussen UTC en lokale tijd

Date biedt methoden om zowel lokale tijd als UTC te verwerken. Het is belangrijk dit verschil goed te begrijpen voor serverintegratie en internationale compatibiliteit.

1const date = new Date();
2
3console.log(date.getHours());    // Local time (hours)
4console.log(date.getUTCHours()); // UTC time (hours)

• De getUTC*-methoden geven altijd waarden op basis van UTC terug. Wees extra voorzichtig bij het verwerken van gegevens over verschillende tijdzones.

Aandachtspunten bij het gebruik van Date-objecten

Date is handig, maar het heeft ook enkele ingewikkelde aspecten. Met name de bij nul beginnende maand en de mutabiliteit zijn veelvoorkomende oorzaken van bugs.

Laten we hieronder naar specifieke voorbeelden kijken om het effect te zien van het feit dat Date aanpasbaar is.

1const original = new Date("2025-01-01");
2const copy = new Date(original);
3
4copy.setDate(10);
5
6console.log(original);
7console.log(copy);

• Als je de originele datum en tijd wilt behouden, maak dan altijd een kopie. Alleen al door bewust te zijn van dit punt, kun je ongewenste bugs voorkomen.

Redenen waarom Date lastig te hanteren is en criteria voor het gebruik van bibliotheken

Het Date-object biedt voldoende functies als standaardfunctionaliteit, maar in de praktijk zijn er situaties waarin het moeilijk te gebruiken is. Typische problemen zijn dat maanden en weekdagen vanaf nul worden geteld, de verwarring tussen lokale tijd en UTC, en het feit dat het object aanpasbaar is. Deze problemen kunnen tot meer bugs leiden naarmate de datumverwerking toeneemt.

Date is voldoende voor eenvoudige datumopvraging en -vergelijking, maar de leesbaarheid en onderhoudbaarheid van de code nemen vaak af bij meer datumbewerkingen of opmaak van weergaves.

Als je de volgende eisen hebt, kun je overwegen lichte datumbibliotheken zoals dayjs of date-fns te gebruiken.

• Je moet expliciet tijdzones verwerken
• Je moet vaak datum- of intervalberekeningen uitvoeren
• Je wilt het weergaveformaat flexibel kunnen aanpassen
• Je wilt data en tijden onveranderlijk behandelen

Samenvatting

Date-objecten zijn het meest fundamentele hulpmiddel voor het werken met datum en tijd in JavaScript. Door de eigenaardigheden te begrijpen en correct aan te maken, op te halen, te berekenen en te formatteren, kun je het veilig in de praktijk gebruiken.

Na het beheersen van de basis is het praktisch om indien nodig datum-bibliotheken te gebruiken.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video