JavaScript Temporal API: Moderne Datum- en Tijdbewerking

Het JavaScript Date object is al lange tijd een bron van frustratie voor ontwikkelaars. De mutable aard, het gebrek aan ingebouwde tijdzoneondersteuning en de onhandige API hebben geleid tot talloze bibliotheken en workarounds. Gelukkig beoogt de Temporal API deze tekortkomingen aan te pakken door een moderne, intuïtieve en tijdzonebewuste oplossing te bieden voor datum- en tijdbewerking in JavaScript.

Wat is de Temporal API?

De Temporal API is een nieuw globaal object, Temporal, dat een moderne en gestandaardiseerde manier biedt om met datums en tijden in JavaScript te werken. Het is ontworpen om het verouderde Date object te vervangen en biedt aanzienlijke verbeteringen op het gebied van API-ontwerp, onveranderlijkheid (immutability), tijdzoneondersteuning en algemene bruikbaarheid. Het is onderdeel van een ECMAScript-voorstel en wordt geïmplementeerd in grote JavaScript-engines.

Belangrijkste voordelen van de Temporal API:

• Onveranderlijkheid (Immutability): Temporal objecten zijn onveranderlijk, wat betekent dat bewerkingen erop nieuwe objecten retourneren in plaats van het origineel te wijzigen. Dit helpt onverwachte neveneffecten te voorkomen en maakt code gemakkelijker te begrijpen.
• Duidelijke API: De API is ontworpen om intuïtiever en consistenter te zijn dan het verouderde Date object.
• Tijdzoneondersteuning: Temporal biedt robuuste ondersteuning voor tijdzones, waardoor u kunt werken met datums en tijden op verschillende locaties over de hele wereld.
• Kalenderondersteuning: Naast de Gregoriaanse kalender staat de API het gebruik van andere kalendersystemen toe, wat wereldwijde toepassingen vergemakkelijkt.
• Afhandeling van Schrikkelseconden: De Temporal API houdt rekening met schrikkelseconden, wat nauwkeurigere tijdberekeningen oplevert.

Aan de slag met Temporal

Hoewel de Temporal API nog in ontwikkeling is en nog niet volledig wordt ondersteund in alle browsers en Node.js-omgevingen, kunt u vandaag nog een polyfill gebruiken om ermee te experimenteren. U kunt de polyfill installeren via npm:

            npm install @js-temporal/polyfill
            

              
                Copy
              
            
          

Importeer vervolgens de polyfill in uw JavaScript-code:

            import { Temporal } from '@js-temporal/polyfill';
            

              
                Copy
              
            
          

Nadat de polyfill is geïnstalleerd, kunt u het Temporal object en de bijbehorende klassen gaan gebruiken.

Kern Temporal Klassen

De Temporal API biedt verschillende kernklassen voor het werken met datums en tijden:

• Temporal.PlainDate: Vertegenwoordigt een kalenderdatum (jaar, maand en dag) zonder tijdzone- of tijd-van-de-dag-informatie.
• Temporal.PlainTime: Vertegenwoordigt een tijd van de dag (uur, minuut, seconde en fractie van een seconde) zonder datum- of tijdzone-informatie.
• Temporal.PlainDateTime: Vertegenwoordigt een datum en tijd zonder tijdzone-informatie.
• Temporal.ZonedDateTime: Vertegenwoordigt een datum en tijd met een specifieke tijdzone.
• Temporal.Instant: Vertegenwoordigt een specifiek moment in de tijd, gemeten in nanoseconden sinds de Unix epoch (1 januari 1970, 00:00:00 Coordinated Universal Time (UTC)).
• Temporal.TimeZone: Vertegenwoordigt een tijdzone.
• Temporal.Duration: Vertegenwoordigt een tijdsduur, zoals uren, minuten of seconden.
• Temporal.Now: Biedt toegang tot de huidige datum en tijd.

Werken met PlainDate

De Temporal.PlainDate klasse vertegenwoordigt een datum zonder tijdzone- of tijd-van-de-dag-informatie. Het is nuttig voor het weergeven van verjaardagen, jubilea of andere op datums gebaseerde gebeurtenissen.

Een PlainDate aanmaken:

            const plainDate = Temporal.PlainDate.from({ year: 2024, month: 10, day: 26 });
console.log(plainDate.toString()); // Output: 2024-10-26
            

              
                Copy
              
            
          

U kunt ook een PlainDate aanmaken vanuit een string in ISO 8601-formaat:

            const plainDateFromString = Temporal.PlainDate.from('2024-12-25');
console.log(plainDateFromString.toString()); // Output: 2024-12-25
            

              
                Copy
              
            
          

Toegang tot Datumcomponenten:

            const year = plainDate.year; // 2024
const month = plainDate.month; // 10
const day = plainDate.day;   // 26
const dayOfWeek = plainDate.dayOfWeek; // Dag van de week (1-7, Maandag-Zondag)
const dayOfYear = plainDate.dayOfYear; // Dag van het jaar (1-366)
const daysInMonth = plainDate.daysInMonth; // Aantal dagen in de maand
const isLeapYear = plainDate.isLeapYear;   // Boolean die aangeeft of het een schrikkeljaar is
            

              
                Copy
              
            
          

Dagen Toevoegen en Aftrekken:

            const nextDay = plainDate.add({ days: 1 });
console.log(nextDay.toString()); // Output: 2024-10-27

const previousWeek = plainDate.subtract({ weeks: 1 });
console.log(previousWeek.toString()); // Output: 2024-10-19
            

              
                Copy
              
            
          

Datums Vergelijken:

            const anotherDate = Temporal.PlainDate.from({ year: 2024, month: 11, day: 15 });

if (plainDate.equals(anotherDate)) {
  console.log('Datums zijn gelijk');
} else if (plainDate.lessThan(anotherDate)) {
  console.log('plainDate is eerder dan anotherDate');
} else {
  console.log('plainDate is later dan anotherDate');
}
// Output: plainDate is earlier than anotherDate
            

              
                Copy
              
            
          

Werken met PlainTime

De Temporal.PlainTime klasse vertegenwoordigt een tijd van de dag zonder datum- of tijdzone-informatie. Het is nuttig voor het weergeven van openingstijden, vergadertijden of andere op tijden gebaseerde gebeurtenissen.

Een PlainTime aanmaken:

            const plainTime = Temporal.PlainTime.from({ hour: 14, minute: 30, second: 0 });
console.log(plainTime.toString()); // Output: 14:30:00
            

              
                Copy
              
            
          

U kunt ook een PlainTime aanmaken vanuit een string in ISO 8601-formaat:

            const plainTimeFromString = Temporal.PlainTime.from('09:00:00');
console.log(plainTimeFromString.toString()); // Output: 09:00:00
            

              
                Copy
              
            
          

Toegang tot Tijdscomponenten:

            const hour = plainTime.hour;   // 14
const minute = plainTime.minute; // 30
const second = plainTime.second; // 0
const millisecond = plainTime.millisecond; // 0
const microsecond = plainTime.microsecond; // 0
const nanosecond = plainTime.nanosecond;   // 0
            

              
                Copy
              
            
          

Tijd Toevoegen en Aftrekken:

            const laterTime = plainTime.add({ minutes: 15 });
console.log(laterTime.toString()); // Output: 14:45:00

const earlierTime = plainTime.subtract({ hours: 1 });
console.log(earlierTime.toString()); // Output: 13:30:00
            

              
                Copy
              
            
          

Tijden Vergelijken:

            const anotherTime = Temporal.PlainTime.from({ hour: 15, minute: 0, second: 0 });

if (plainTime.equals(anotherTime)) {
  console.log('Tijden zijn gelijk');
} else if (plainTime.lessThan(anotherTime)) {
  console.log('plainTime is eerder dan anotherTime');
} else {
  console.log('plainTime is later dan anotherTime');
}
// Output: plainTime is earlier than anotherTime
            

              
                Copy
              
            
          

Werken met PlainDateTime

De Temporal.PlainDateTime klasse vertegenwoordigt een datum en tijd zonder tijdzone-informatie. Het combineert de functionaliteit van PlainDate en PlainTime.

Een PlainDateTime aanmaken:

            const plainDateTime = Temporal.PlainDateTime.from({ year: 2024, month: 10, day: 26, hour: 14, minute: 30, second: 0 });
console.log(plainDateTime.toString()); // Output: 2024-10-26T14:30:00
            

              
                Copy
              
            
          

U kunt ook een PlainDateTime aanmaken vanuit een string in ISO 8601-formaat:

            const plainDateTimeFromString = Temporal.PlainDateTime.from('2024-12-25T09:00:00');
console.log(plainDateTimeFromString.toString()); // Output: 2024-12-25T09:00:00
            

              
                Copy
              
            
          

Toegang tot Datum- en Tijdscomponenten:

            const year = plainDateTime.year;   // 2024
const month = plainDateTime.month; // 10
const day = plainDateTime.day;     // 26
const hour = plainDateTime.hour;   // 14
const minute = plainDateTime.minute; // 30
const second = plainDateTime.second; // 0
            

              
                Copy
              
            
          

Datums en Tijden Toevoegen en Aftrekken:

            const nextDayAndTime = plainDateTime.add({ days: 1, hours: 2 });
console.log(nextDayAndTime.toString()); // Output: 2024-10-27T16:30:00

const previousWeekAndTime = plainDateTime.subtract({ weeks: 1, minutes: 30 });
console.log(previousWeekAndTime.toString()); // Output: 2024-10-19T14:00:00
            

              
                Copy
              
            
          

Converteren naar PlainDate en PlainTime:

            const plainDateFromDateTime = plainDateTime.toPlainDate();
console.log(plainDateFromDateTime.toString()); // Output: 2024-10-26

const plainTimeFromDateTime = plainDateTime.toPlainTime();
console.log(plainTimeFromDateTime.toString()); // Output: 14:30:00
            

              
                Copy
              
            
          

Werken met ZonedDateTime

De Temporal.ZonedDateTime klasse vertegenwoordigt een datum en tijd met een specifieke tijdzone. Dit is cruciaal voor toepassingen die datums en tijden in verschillende locaties over de hele wereld moeten verwerken. In tegenstelling tot het verouderde Date object, biedt Temporal ingebouwde tijdzoneondersteuning.

Een ZonedDateTime aanmaken:

            const zonedDateTime = Temporal.ZonedDateTime.from({ year: 2024, month: 10, day: 26, hour: 14, minute: 30, second: 0, timeZone: 'America/Los_Angeles' });
console.log(zonedDateTime.toString()); // Output: 2024-10-26T14:30:00-07:00[America/Los_Angeles]
            

              
                Copy
              
            
          

U kunt ook een ZonedDateTime aanmaken vanuit een Instant en een tijdzone:

            const instant = Temporal.Instant.fromEpochSeconds(1666785000); // Voorbeeld timestamp
const zonedDateTimeFromInstant = instant.toZonedDateTimeISO('Europe/London');
console.log(zonedDateTimeFromInstant.toString()); // Output varieert op basis van het instant, maar weerspiegelt de datum/tijd in Europe/London
            

              
                Copy
              
            
          

Toegang tot Datum- en Tijdscomponenten:

            const year = zonedDateTime.year;   // 2024
const month = zonedDateTime.month; // 10
const day = zonedDateTime.day;     // 26
const hour = zonedDateTime.hour;   // 14
const minute = zonedDateTime.minute; // 30
const second = zonedDateTime.second; // 0
const timeZone = zonedDateTime.timeZone; // Temporal.TimeZone object
            

              
                Copy
              
            
          

Converteren Tussen Tijdzones:

            const newYorkDateTime = zonedDateTime.withTimeZone('America/New_York');
console.log(newYorkDateTime.toString()); // Output: 2024-10-26T17:30:00-04:00[America/New_York]
            

              
                Copy
              
            
          

Afhandeling van Zomertijd (DST):

Temporal handelt DST-overgangen automatisch af. Bij het toevoegen of aftrekken van tijd wordt rekening gehouden met DST, wat zorgt voor nauwkeurige resultaten. Beschouw bijvoorbeeld een vergadering gepland tijdens de DST-overgang in Duitsland:

            const meetingStart = Temporal.ZonedDateTime.from({ year: 2024, month: 3, day: 31, hour: 2, minute: 30, timeZone: 'Europe/Berlin' });
const meetingEnd = meetingStart.add({ hours: 1 }); // 1 uur toevoegen
console.log(meetingEnd.toString()); // Output: 2024-03-31T03:30:00+02:00[Europe/Berlin]. Let op: de offset wijzigt vanwege DST
            

              
                Copy
              
            
          

Werken met Instant

De Temporal.Instant klasse vertegenwoordigt een specifiek moment in de tijd, gemeten in nanoseconden sinds de Unix epoch. Het is nuttig voor het opslaan en vergelijken van exacte tijdstippen.

Een Instant aanmaken:

            const instant = Temporal.Instant.fromEpochSeconds(1666785000); // Voorbeeld Unix timestamp in seconden
console.log(instant.toString()); // Output is een ISO-string representatie van dat instant
            

              
                Copy
              
            
          

Converteren naar ZonedDateTime:

            const zonedDateTimeFromInstant = instant.toZonedDateTimeISO('America/Los_Angeles');
console.log(zonedDateTimeFromInstant.toString()); // Output: Datum en tijd in America/Los_Angeles die overeenkomt met het instant
            

              
                Copy
              
            
          

Instants Vergelijken:

            const anotherInstant = Temporal.Instant.fromEpochSeconds(1666790000);

if (instant.equals(anotherInstant)) {
  console.log('Instants zijn gelijk');
} else if (instant.lessThan(anotherInstant)) {
  console.log('instant is eerder dan anotherInstant');
} else {
  console.log('instant is later dan anotherInstant');
}
// Output: instant is earlier than anotherInstant
            

              
                Copy
              
            
          

Werken met Duration

De Temporal.Duration klasse vertegenwoordigt een tijdsduur, zoals uren, minuten of seconden. Het is nuttig voor het berekenen van het verschil tussen twee datums of tijden.

Een Duration aanmaken:

            const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });
console.log(duration.toString()); // Output: PT2H30M
            

              
                Copy
              
            
          

Het Verschil Tussen Datums/Tijden Berekenen:

            const startDate = Temporal.PlainDateTime.from({ year: 2024, month: 1, day: 1, hour: 0, minute: 0, second: 0 });
const endDate = Temporal.PlainDateTime.from({ year: 2024, month: 1, day: 3, hour: 12, minute: 30, second: 0 });
const difference = endDate.since(startDate);
console.log(difference.toString()); // Output: P2DT12H30M

// Toegang tot de componenten van de duur
console.log(difference.days);    // 2
console.log(difference.hours);   // 12
console.log(difference.minutes); // 30
            

              
                Copy
              
            
          

Duur Toevoegen aan Datums/Tijden:

            const newDate = startDate.add(duration);
console.log(newDate.toString()); // Output: 2024-01-03T02:30:00
            

              
                Copy
              
            
          

Werken met Kalenders

De Temporal API ondersteunt verschillende kalendersystemen buiten de Gregoriaanse kalender. Hoewel dit nog niet volledig is geïmplementeerd in alle polyfills en engines, is het de bedoeling om applicaties in staat te stellen datums in kalenders te verwerken die specifiek zijn voor diverse culturen. Om bijvoorbeeld de Japanse kalender te gebruiken (hypothetisch, aangezien de implementatie nog evolueert):

            // Dit is een conceptueel voorbeeld, aangezien kalenderondersteuning nog in ontwikkeling is
// const japaneseDate = Temporal.PlainDate.from({ year: 2024, month: 10, day: 26, calendar: 'japanese' });
// console.log(japaneseDate.toString()); // Verwacht: Output geformatteerd volgens de Japanse kalender

            

              
                Copy
              
            
          

Opmerking: Kalenderondersteuning is een evoluerend kenmerk van de Temporal API, en volledige functionaliteit is nog niet universeel beschikbaar.

Praktische Voorbeelden en Gebruiksscenario's

De Temporal API biedt een breed scala aan mogelijkheden voor het verwerken van datums en tijden in JavaScript. Hier zijn enkele praktische voorbeelden en gebruiksscenario's:

• Afspraken Plannen: Creëer een planningsapplicatie waarmee gebruikers afspraken kunnen boeken in hun lokale tijdzone. Temporal.ZonedDateTime maakt het eenvoudig om tussen tijdzones te converteren en DST-overgangen af te handelen. Voor een kliniek in Berlijn die wereldwijd afspraken plant:

            const appointmentTimeBerlin = Temporal.ZonedDateTime.from({ year: 2024, month: 11, day: 5, hour: 10, minute: 0, timeZone: 'Europe/Berlin' });
const appointmentTimeLA = appointmentTimeBerlin.withTimeZone('America/Los_Angeles');
console.log(`Afspraaktijd in Berlijn: ${appointmentTimeBerlin.toString()}`);
console.log(`Afspraaktijd in Los Angeles: ${appointmentTimeLA.toString()}`);
            

              
                Copy
              
            
          

• Leeftijd Berekenen: Bepaal de leeftijd van een gebruiker op basis van hun geboortedatum. PlainDate stelt u in staat de geboortedatum weer te geven zonder tijdzone-informatie.

            const birthDate = Temporal.PlainDate.from({ year: 1990, month: 5, day: 15 });
const today = Temporal.Now.plainDateISO();
const age = today.year - birthDate.year - (today.month < birthDate.month || (today.month === birthDate.month && today.day < birthDate.day) ? 1 : 0);
console.log(`Leeftijd: ${age}`);
            

              
                Copy
              
            
          

• Datums en Tijden in Verschillende Formaten Weergeven: Formatteer datums en tijden volgens de lokale instellingen van de gebruiker. Hoewel internationaliseringsfuncties (Intl) apart zijn, kunnen Temporal-objecten eenvoudig worden geformatteerd met toLocaleString() of vergelijkbare methoden in combinatie met Intl API-functies.

            const zonedDateTimeNow = Temporal.Now.zonedDateTimeISO('en-GB');
console.log(zonedDateTimeNow.toLocaleString('en-GB'));
console.log(zonedDateTimeNow.toLocaleString('de-DE'));
            

              
                Copy
              
            
          

• Duur van Gebeurtenissen Bijhouden: Bereken het tijdsverschil van een gebeurtenis en toon deze in een leesbaar formaat. Duration stelt u in staat het tijdsverschil tussen twee datums of tijden weer te geven.

            const eventStart = Temporal.Instant.fromEpochSeconds(1700000000); // Voorbeeld start timestamp
const eventEnd = Temporal.Instant.fromEpochSeconds(1700005000);   // Voorbeeld eind timestamp
const durationOfEvent = eventEnd.since(eventStart);
console.log(`Duur van gebeurtenis: ${durationOfEvent.minutes} minuten`);
            

              
                Copy
              
            
          

Best Practices voor het Gebruik van de Temporal API

Hier zijn enkele best practices om in gedachten te houden bij het gebruik van de Temporal API:

• Gebruik Onveranderlijkheid (Immutability): Omarm de onveranderlijkheid van Temporal objecten. Vermijd het direct wijzigen van objecten. Maak in plaats daarvan nieuwe objecten aan met methoden zoals add, subtract en with.
• Ga Zorgvuldig Om Met Tijdzones: Wees voorzichtig met tijdzones bij het werken met datums en tijden. Gebruik ZonedDateTime wanneer u datums en tijden in een specifieke tijdzone moet weergeven.
• Gebruik Duidelijke Variabelenamen: Gebruik beschrijvende variabelenamen die duidelijk het type Temporal object aangeven (bijv. plainDate, zonedDateTime, duration).
• Overweeg Polyfills: Omdat Temporal nog relatief nieuw is, zorg voor voldoende ondersteuning door waar nodig een polyfill bibliotheek te gebruiken.
• Valideer Input: Valideer altijd gebruikersinvoer om ervoor te zorgen dat datums en tijden in het juiste formaat zijn.

Migratie van Legacy Date

Migreren van het verouderde Date object kan een geleidelijk proces zijn. Overweeg deze strategieën:

• Incrementele Adoptie: Begin met het gebruik van Temporal in nieuwe code, terwijl u Date behoudt in bestaande delen van uw applicatie.
• Wrapper Functies: Maak wrapper functies die converteren tussen Date en Temporal objecten om interoperabiliteit tijdens de migratie te vergemakkelijken.
• Grondig Testen: Test de migratie uitgebreid om ervoor te zorgen dat alle datum- en tijdberekeningen accuraat zijn.

Temporal API versus Moment.js

Moment.js was een populaire bibliotheek voor datum- en tijdbewerking in JavaScript, maar het wordt nu beschouwd als een verouderd project en bevindt zich in onderhoudsmodus. De Temporal API biedt een modernere en gestandaardiseerde oplossing die veel van de tekortkomingen van Moment.js aanpakt. Moment.js is mutable en heeft geen native tijdzoneondersteuning. De Temporal API is immutable en heeft native tijdzoneondersteuning.

Conclusie

De JavaScript Temporal API vertegenwoordigt een aanzienlijke verbetering ten opzichte van het verouderde Date object. De onveranderlijkheid, de duidelijke API, de tijdzoneondersteuning en de kalenderondersteuning maken het tot een krachtig hulpmiddel voor het verwerken van datums en tijden in moderne JavaScript-applicaties. Hoewel de adoptie nog groeit, kunt u met een polyfill vandaag nog profiteren van de voordelen. Naarmate de API breder wordt ondersteund, wordt verwacht dat deze de standaardmanier wordt om met datums en tijden in JavaScript te werken.

Omarm de Temporal API en ontgrendel een efficiëntere en betrouwbaardere manier om datums en tijden in uw projecten te beheren, zodat uw applicatie wereldwijde tijdzones en berekeningen nauwkeurig afhandelt.