Bijna elke soort applicatie die in JavaScript is geschreven, werkt in een bepaalde hoedanigheid met tijden of datums. In het begin was dit beperkt tot de ingebouwde Date API. Deze API bevat basisfunctionaliteit, maar is vrij beperkt in wat deze kan doen. Bibliotheken van derden, zoals Moment.js, en latere ingebouwde API's zoals de Intl API's en de nieuwe Temporal API, voegen veel grotere flexibiliteit toe aan het werken met tijden en datums. De opkomst en ondergang van Moment.js Moment.js is een JavaScript-bibliotheek met krachtige hulpprogramma's voor het werken met tijden en datums. Het bevat ontbrekende functies van de basis Date API, zoals tijdzonemanipulatie, en maakt veel algemene bewerkingen eenvoudiger. Moment bevat ook functies voor het opmaken van datums en tijden. Het werd een veelgebruikte bibliotheek in veel verschillende toepassingen. Moment had echter ook een aantal problemen. Het is een grote bibliotheek en kan de bundelgrootte van een applicatie aanzienlijk vergroten. Omdat de bibliotheek geen boomschudden ondersteunt (een functie van moderne bundelaars die ongebruikte delen van bibliotheken kunnen verwijderen), is de volledige Moment-bibliotheek inbegrepen, zelfs als u slechts een of twee van zijn functies gebruikt. Een ander probleem met Moment is het feit dat de objecten die het creëert veranderlijk zijn. Het aanroepen van bepaalde functies op een Moment-object heeft bijwerkingen en muteert de waarde van dat object. Dit kan leiden tot onverwacht gedrag of bugs. In 2020 besloten de beheerders van Moment om de bibliotheek in onderhoudsmodus te zetten. Er wordt geen nieuwe functie ontwikkeld en de beheerders raden af om deze voor nieuwe projecten te gebruiken. Er zijn andere JavaScript-datumbibliotheken, zoals date-fns, maar er is een nieuwe speler in de stad, een API die rechtstreeks in JavaScript is ingebouwd: Temporal. Het is een nieuwe standaard die de gaten van de originele Date API opvult en enkele beperkingen oplost die te vinden zijn in Moment en andere bibliotheken. Wat is temporeel? Temporal is een nieuwe tijd- en datum-API die wordt toegevoegd aan de ECMAScript-standaard, die modern JavaScript definieert. Vanaf maart 20266 heeft het fase 4 van het TC39-proces bereikt (de commissie die toezicht houdt op voorstellen en toevoegingen aan de JavaScript-taal) en zal het worden opgenomen in de volgende versie van de ECMAScript-specificatie. Het is al geïmplementeerd in verschillende browsers: Chrome 144+ en Firefox 139+, en Safari zal naar verwachting binnenkort volgen. Er is ook een polyfill beschikbaar voor niet-ondersteunde browsers en Node.js. De Temporal API maakt objecten die over het algemeen momenten in de tijd vertegenwoordigen. Dit kunnen fulltime- en datumstempels zijn in een bepaalde tijdzone, of ze kunnen een generiek exemplaar zijn van de “wandklok”-tijd zonder enige tijdzone- of datuminformatie. Enkele van de belangrijkste kenmerken van Temporal zijn:
Tijden met of zonder datums. Een Temporal-object kan een specifieke tijd op een specifieke datum vertegenwoordigen, of een tijd zonder enige datuminformatie. Een specifieke datum, zonder tijd, kan ook worden weergegeven. Ondersteuning voor tijdzones. Tijdelijke objecten zijn volledig tijdzonebewust en kunnen naar verschillende tijdzones worden geconverteerd. Moment ondersteunt ook tijdzones, maar hiervoor is de extra moment-tijdzonebibliotheek vereist. Onveranderlijkheid. Zodra een Temporal-object is gemaakt, kan het niet meer worden gewijzigd. Tijdrekenkundige of tijdzoneconversies wijzigen het onderliggende object niet. In plaats daarvan genereren ze een nieuw Temporal-object. 1-gebaseerde indexering. Een veel voorkomende bron van bugs met de Date API (en ook met Moment) is dat maanden op nul worden geïndexeerd. Dit betekent dat januari maand 0 is, in plaats van maand 1, zoals we allemaal in het echte leven begrijpen. Tijdelijk lost dit op door gebruik te maken van op 1 gebaseerde indexering: januari is maand 1. Het is ingebouwd in de browser. Omdat Temporal een API is in de browser zelf, voegt het niets toe aan de bundelgrootte van uw applicatie.
Het is ook belangrijk op te merken dat de Date API niet verdwijnt. Hoewel Temporal deze API vervangt, wordt deze niet verwijderd of verouderd. Veel applicaties zouden kapot gaan als browsers plotseling de Date API zouden verwijderen. Houd er echter ook rekening mee dat Moment nu wordt beschouwd als een verouderd project in de onderhoudsmodus. In de rest van het artikel zullen we enkele ‘recepten’ bekijken voor het migreren van op Moment gebaseerde code naar de nieuwe Temporal API. Laten we beginnen met refactoren! Datum- en tijdobjecten maken Voordat we datums en tijden kunnen manipuleren, moeten we objecten maken die deze representeren. Gebruik de momentfunctie om een Moment-object te maken dat de huidige datum en tijd vertegenwoordigt. const nu = moment(); console.log (nu); // Moment<2026-02-18T21:26:29-05:00>
Dit object kan nu indien nodig worden opgemaakt of gemanipuleerd.
// converteren naar UTC //waarschuwing: Dit muteert het Moment-object en zet het in UTC-modus! console.log(nu.utc()); // Moment<2026-02-19T02:26:29Z>
// print een geformatteerde string - merk op dat deze nu de UTC-tijd gebruikt console.log(now.format('MM/DD/JJJJ uu:mm:ss a')); // 19-02-2026 02:27:07 uur
Het belangrijkste om te onthouden over Moment is dat een Moment-object altijd informatie bevat over de tijd en de datum. Als u alleen met tijdinformatie hoeft te werken, is dit meestal prima, maar het kan onverwacht gedrag veroorzaken in situaties zoals zomertijd of schrikkeljaren, waarbij de datum invloed kan hebben op tijdberekeningen. Tijdelijk is flexibeler. U kunt een object maken dat de huidige datum en tijd vertegenwoordigt door een Temporal.Instant-object te maken. Dit vertegenwoordigt een tijdstip dat wordt gedefinieerd door de tijd sinds “het tijdperk” (middernacht UTC op 1 januari 1970). Temporal kan naar dit moment in de tijd verwijzen met precisie op nanosecondeniveau. const nu = Tijdelijk.Nu.instant();
// zie ruwe nanoseconden sinds het tijdperk console.log(nu.epochNanoseconds); // 1771466342612000000n
// formaat voor UTC console.log(nu.toString()); // 19-02-2026T01:55:27.844Z
// formaat voor een bepaalde tijdzone console.log(now.toString({ tijdzone: 'Amerika/New_York' })); // 2026-02-18T20:56:57.905-05:00
Temporal.Instant-objecten kunnen ook voor een specifieke tijd en datum worden gemaakt met behulp van de statische methode.
const mijnInstant = Tijdelijk.Instant.from('2026-02-18T21:10:00-05:00');
// Formatteer het moment in de lokale tijdzone. Houd er rekening mee dat dit alleen controleert // de opmaak - het muteert het object niet zoals moment.utc dat doet. console.log(myInstant.toString({ tijdzone: 'Amerika/New_York' })); // 18-02-2026T21:10:00-05:00
U kunt ook andere typen tijdelijke objecten maken, waaronder:
Temporal.PlainDate: een datum zonder tijdsinformatie. Temporal.PlainTime: een tijd zonder datuminformatie. Temporal.ZonedDateTime: Een datum en tijd in een specifieke tijdzone.
Elk van deze heeft een from-methode die kan worden aangeroepen met een object dat de datum en/of tijd specificeert, of een datumreeks om te parseren. // Gewoon een date const vandaag = Temporal.PlainDate.from({ jaar: 2026, maand: 2, // let op: we gebruiken 2 voor februari dag: 18 }); console.log(vandaag.toString()); // 18-02-2026
// Even const lunchTime = Temporal.PlainTime.from({ uur: 12 }); console.log(lunchTime.toString()); // 12:00:00
// Een datum en tijd in de oostelijke tijdzone van de VS const dueAt = Temporal.ZonedDateTime.from({ tijdzone: 'Amerika/New_York', jaar: 2026, maand: 3, dag: 1, uur: 12, minuut: 0, tweede: 0 }); console.log(dueAt.toString()); // 2026-03-01T12:00:00-05:00[Amerika/New_York]
Parseren We hebben het programmatisch maken van datum- en tijdinformatie besproken. Laten we nu eens kijken naar het parseren. Parseren is een gebied waarop Moment flexibeler is dan de ingebouwde Temporal API. U kunt een datumreeks ontleden door deze door te geven aan de momentfunctie. Met een enkel argument verwacht Moment een ISO-datumtekenreeks, maar u kunt alternatieve formaten gebruiken als u een tweede argument opgeeft dat het gebruikte datumformaat specificeert.
const isoDate = moment('2026-02-21T09:00:00'); const formattedDate = moment('21/2/26 9:00:00', 'M/D/JJ u:mm:ss');
console.log(isoDatum); // Moment<2026-02-21T09:00:00-05:00>
console.log(geformatteerde datum); // Moment<2026-02-21T09:00:00-05:00>
In oudere versies zou Moment de beste schatting maken om elke willekeurig opgemaakte datumreeks te ontleden. Dit kan tot onvoorspelbare resultaten leiden. Is 02-03-2026 bijvoorbeeld 2 februari of 3 maart? Om deze reden geven nieuwere versies van Moment een prominente beëindigingswaarschuwing weer als het wordt aangeroepen zonder een ISO-geformatteerde datumtekenreeks (tenzij het tweede argument met het gewenste formaat ook wordt opgegeven). Temporal parseert alleen een specifiek opgemaakte datumtekenreeks. De tekenreeks moet voldoen aan het ISO 8601-formaat of de extensie ervan, RFC 9557. Als een niet-conforme datumtekenreeks wordt doorgegeven aan een from-methode, genereert Temporal een RangeError.
// Met behulp van een RFC 9557-datumreeks const myDate = Temporal.Instant.from('2026-02-21T09:00:00-05:00[Amerika/New_York]'); console.log(myDate.toString({ tijdzone: 'Amerika/New_York' })); // 21-02-2026T09:00:00-05:00
// Een onbekende datumreeks gebruiken const otherDate = Temporal.Instant.from('2/21/26 9:00:00'); // RangeError: Tijdelijke fout: ongeldig teken tijdens het parseren van de jaarwaarde.
De exacte vereisten voor de datumtekenreeks zijn afhankelijk van het soort Temporal-object dat u maakt. In het bovenstaande voorbeeld vereist Temporal.Instant een volledige ISO8601- of RFC 9557-datumtekenreeks die de datum en tijd specificeert met een tijdzoneverschuiving, maar u kunt ook PlainDate- of PlainTime-objecten maken met slechts een subset van de datumnotatie. const myDate = Temporal.PlainDate.from('21-02-2026'); console.log(mijnDatum.toString()); // 21-02-2026
const myTime = Temporal.PlainTime.from('09:00:00'); console.log(mijnTijd.toString()); // 09:00:00
Houd er rekening mee dat deze tekenreeksen nog steeds moeten voldoen aan het verwachte formaat, anders wordt er een fout gegenereerd.
// Gebruik van niet-compatibele tijdreeksen. Deze zullen allemaal een RangeError genereren. Tijdelijk.PlainTime.from('9:00'); Temporal.PlainTime.from('9:00:00 AM');
Tip van een professional: omgaan met niet-ISO-tekenreeksen Omdat Temporal prioriteit geeft aan betrouwbaarheid, zal het niet proberen het formaat van een tekenreeks zoals 01-02-2026 te raden. Als uw gegevensbron dergelijke tekenreeksen gebruikt, moet u tekenreeksmanipulatie uitvoeren om de waarden opnieuw in te delen in een ISO-tekenreeks zoals 2026-02-01 voordat u deze met Temporal probeert te gebruiken.
Opmaak Als u eenmaal een Moment- of Temporal-object heeft, wilt u dit waarschijnlijk op een gegeven moment naar een opgemaakte tekenreeks converteren. Dit is een voorbeeld waarin Moment wat beknopter is. U roept de formaatmethode van het object aan met een reeks tokens die het gewenste datumformaat beschrijven. const datum = moment();
console.log(datum.format('MM/DD/JJJJ')); // 22/02/2026
console.log(date.format('MMMM Doe JJJJ, u:mm:ss a')); // 22 februari 2026, 20:18:30 uur
Aan de andere kant vereist Temporal dat je wat uitgebreider bent. Tijdelijke objecten, zoals Instant, hebben een toLocaleString-methode die verschillende opmaakopties accepteert die zijn opgegeven als eigenschappen van een object.
const date = Temporal.Now.instant();
// zonder argumenten krijgen we het standaardformaat voor de huidige landinstelling console.log(date.toLocaleString()); // 22-02-2026, 20:23:36 PM (uitgaande van de landinstelling en-US)
// geef opmaakopties door om een aangepaste opmaaktekenreeks te genereren console.log(date.toLocaleString('en-US', { maand: 'lang', dag: 'numeriek', jaar: 'numeriek', uur: '2 cijfers', minuut: '2 cijfers' })); // 22 februari 2026 om 20:23 uur
// geef alleen de gewenste velden door in de formatstring console.log(date.toLocaleString('en-US', { maand: 'kort', dag: 'numeriek' })); // 22 februari
Tijdelijke datumnotatie maakt feitelijk gebruik van de Intl.DateTimeFormat API (die al direct beschikbaar is in moderne browsers) onder de motorkap. Dat betekent dat u een herbruikbaar DateTimeFormat-object kunt maken met uw aangepaste opmaakopties, en vervolgens Temporal-objecten kunt doorgeven aan de opmaakmethode ervan. Daarom ondersteunt het geen aangepaste datumformaten zoals Moment dat doet. Als je zoiets als 'Q1 2026' of een andere gespecialiseerde opmaak nodig hebt, heb je mogelijk een aangepaste datumopmaakcode nodig of moet je een bibliotheek van derden raadplegen. const formatter = new Intl.DateTimeFormat('en-US', { maand: '2 cijfers', dag: '2 cijfers', jaar: 'numeriek' });
const date = Temporal.Now.instant(); console.log(formatter.format(datum)); // 22/02/2026
De opmaaktokens van Moment zijn eenvoudiger te schrijven, maar ze zijn niet locale-vriendelijk. Het formaat bevat 'harde code'-zaken, zoals de volgorde van maand/dag. Het voordeel van het gebruik van een configuratieobject, zoals Temporal doet, is dat het zich automatisch aanpast aan een bepaalde landinstelling en het juiste formaat gebruikt. const date = Temporal.Now.instant();
const formatOptions = { maand: 'numeriek', dag: 'numeriek', jaar: 'numeriek' };
console.log(date.toLocaleString('en-US', formatOptions)); // 22/2/2026
console.log(date.toLocaleString('en-GB', formatOptions)); // 22/02/2026
Datum berekeningen In veel toepassingen moet u uiteindelijk een aantal berekeningen op een datum uitvoeren. Mogelijk wilt u tijdseenheden (dagen, uren, seconden, enz.) optellen of aftrekken. Als u bijvoorbeeld de huidige datum heeft, wilt u de gebruiker mogelijk de datum over één week laten zien. Moment-objecten beschikken over methoden zoals optellen en aftrekken die deze bewerkingen uitvoeren. Deze functies hebben een waarde en een eenheid nodig, bijvoorbeeld: add(7, 'days'). Een heel belangrijk verschil tussen Moment en Temporal is echter dat bij het uitvoeren van deze datumberekeningen het onderliggende object wordt gewijzigd en de oorspronkelijke waarde ervan verloren gaat. const nu = moment();
console.log (nu); // Moment<2026-02-24T20:08:36-05:00>
const nextWeek = nu.add(7, 'dagen'); console.log(volgende week); // Moment<2026-03-03T20:08:36-05:00>
// Gotcha - het originele object is gemuteerd console.log (nu); // Moment<2026-03-03T20:08:36-05:00>
Om te voorkomen dat de oorspronkelijke datum verloren gaat, kunt u kloon op het Moment-object aanroepen om een kopie te maken. const nu= moment(); const nextWeek = nu.clone().add(7, 'dagen');
console.log (nu); // Moment<2026-02-24T20:12:55-05:00>
console.log(volgende week); // Moment<2026-03-03T20:12:55-05:00>
Aan de andere kant zijn tijdelijke objecten onveranderlijk. Zodra u een object zoals een Instant, PlainDate, enzovoort hebt gemaakt, zal de waarde van dat object nooit veranderen. Tijdelijke objecten hebben ook methoden voor optellen en aftrekken. Temporal is een beetje kieskeurig over welke tijdseenheden aan welke objecttypen kunnen worden toegevoegd. Je kunt bijvoorbeeld geen dagen toevoegen aan een Instant:
const nu = Tijdelijk.Nu.instant(); const volgendeWeek = nu.add({ dagen: 7 }); // RangeError: Tijdelijke fout: De grootste eenheid kan geen datumeenheid zijn
Dit komt omdat Instant-objecten een specifiek tijdstip in UTC vertegenwoordigen en kalender-agnostisch zijn. Omdat de lengte van een dag kan veranderen op basis van tijdzoneregels zoals zomertijd, is deze berekening niet beschikbaar op een Instant. U kunt deze bewerking echter uitvoeren op andere typen objecten, zoals een PlainDateTime: const nu = Temporal.Now.plainDateTimeISO(); console.log(nu.toLocaleString()); // 24-2-2026, 20:23:59 uur
const volgendeWeek = nu.add({ dagen: 7 });
// Merk op dat de oorspronkelijke PlainDateTime ongewijzigd blijft console.log(nu.toLocaleString()); // 24-2-2026, 20:23:59 uur
console.log(nextWeek.toLocaleString()); // 3-3-2026, 20:23:59 uur
U kunt ook berekenen hoeveel tijd er zit tussen twee Moment- of Temporal-objecten. Met de diff-functie van Moment moet u een eenheid voor granulariteit opgeven, anders wordt het verschil in milliseconden geretourneerd. const date1 = moment('2026-02-21T09:00:00'); const date2 = moment('2026-02-22T10:30:00');
console.log(datum2.diff(datum1)); // 91800000
console.log(datum2.diff(datum1, 'dagen')); // 1
Om dit met een Temporal-object te doen, kunt u een ander Temporal-object doorgeven aan de methoden tot of sinds. Dit retourneert een Temporal.Duration-object met informatie over het tijdsverschil. Het Duration-object heeft eigenschappen voor elke component van het verschil en kan ook een ISO 8601-duurreeks genereren die het tijdsverschil vertegenwoordigt.
const date1 = Temporal.PlainDateTime.from('2026-02-21T09:00:00'); const date2 = Temporal.PlainDateTime.from('2026-02-22T10:30:00');
// grootsteUnit specificeert de grootste tijdseenheid die moet worden weergegeven // in de duurberekening const diff = date2.since(date1, {grootsteEenheid: 'dag' });
console.log(diff.dagen); // 1
console.log(diff.uren); // 1
console.log(diff.minuten); // 30
console.log(diff.toString()); // P1DT1H30M // (ISO 8601-duurreeks: 1 dag, 1 uur, 30 minuten)
Data en tijden vergelijken Met Moment en Temporal kunt u datums en tijden vergelijken om te bepalen welke vóór de ander komt, maar met de API kunt u verschillende benaderingen kiezen. Moment biedt methoden zoals isBefore, isAfter en isSame om twee Moment-objecten te vergelijken. const date1 = moment('2026-02-21T09:00:00'); const date2 = moment('2026-02-22T10:30:00');
console.log(datum1.isBefore(datum2)); // waar
Temporal gebruikt een statische vergelijkingsmethode om een vergelijking uit te voeren tussen twee objecten van hetzelfde type. Het retourneert -1 als de eerste datum vóór de tweede valt, 0 als ze gelijk zijn, of 1 als de eerste datum na de tweede komt. In het volgende voorbeeld ziet u hoe u twee PlainDate-objecten vergelijkt. Beide argumenten voor Temporal.PlainDate.compare moeten PlainDate-objecten zijn.
const date1 = Temporal.PlainDate.from({ jaar: 2026, maand: 2, dag: 24 }); const date2 = Temporal.PlainDate.from({ jaar: 2026, maand: 3, dag: 24 });
// datum1 komt vóór datum2, dus -1 console.log(Temporal.PlainDate.compare(datum1, datum2));
// Fout als we twee objecten van verschillende typen proberen te vergelijken console.log(Temporal.PlainDate.compare(datum1, Temporal.Now.instant())); // TypeError: tijdelijke fout: ongeldige PlainDate-velden opgegeven.
Dit maakt het met name eenvoudig om een reeks tijdelijke objecten chronologisch te sorteren. // Een array van Temporal.PlainDate-objecten const datums = [ ... ];
// gebruik Temporal.PlainDate.compare als de vergelijkingsfunctie dates.sort(Temporal.PlainDate.compare);
Tijdzoneconversies De kern Moment-bibliotheek ondersteunt geen tijdzoneconversies. Als u deze functionaliteit nodig heeft, moet u ook het moment-timezone-pakket installeren. Dit pakket is niet boomschudbaar en kan daarom uw bundelgrootte aanzienlijk vergroten. Nadat u moment-timezone hebt geïnstalleerd, kunt u Moment-objecten met de tz-methode naar verschillende tijdzones converteren. Net als bij andere Moment-bewerkingen muteert dit de onderliggende waardevoorwerp. // Uitgaande van Amerikaanse oostelijke tijd const nu = moment(); console.log (nu); // Moment<2026-02-28T20:08:20-05:00>
// Converteren naar Pacific-tijd. // De oorspronkelijke oostelijke tijd is verloren gegaan. nu.tz('Amerika/Los_Angeles'); console.log (nu); // Moment<2026-02-28T17:08:20-08:00>
Tijdzonefunctionaliteit is ingebouwd in de Temporal API bij gebruik van een Temporal.ZonedDateTime-object. Deze objecten bevatten een methode withTimeZone die een nieuwe ZonedDateTime retourneert die hetzelfde tijdstip vertegenwoordigt, maar in de opgegeven tijdzone. // Nogmaals, uitgaande van de Amerikaanse oostelijke tijd const nu = Temporal.Now.zonedDateTimeISO(); console.log(nu.toLocaleString()); // 28-2-2026, 20:12:02 EST
// Converteren naar Pacific-tijd const nuPacific = nu.withTimeZone('America/Los_Angeles'); console.log(nuPacific.toLocaleString()); // 28-2-2026, 17:12:02 PST
// Oorspronkelijk object blijft ongewijzigd console.log(nu.toLocaleString()); // 28-2-2026, 20:12:02 EST
Opmerking: De opgemaakte waarden die door toLocaleString worden geretourneerd, zijn, zoals de naam aangeeft, afhankelijk van de landinstelling. De voorbeeldcode is ontwikkeld in de landinstelling en-US, dus de indeling is als volgt: 28-2-2026, 17:12:02 PST. In een andere regio kan dit anders zijn. In de landinstelling nl-GB zou je bijvoorbeeld zoiets krijgen als 28/2/2026, 17:12:02 GMT-8. Een refactoring uit de echte wereld Stel dat we een app bouwen voor het plannen van evenementen in verschillende tijdzones. Onderdeel van deze app is een functie, getEventTimes, die een ISO 8601-tekenreeks nodig heeft die de tijd en datum van de gebeurtenis vertegenwoordigt, een lokale tijdzone en een doeltijdzone. De functie maakt opgemaakte tijd- en datumreeksen voor de gebeurtenis in beide tijdzones. Als de functie een invoertekenreeks krijgt die geen geldige tijd/datumtekenreeks is, genereert deze een foutmelding. Hier is de originele implementatie, waarbij gebruik wordt gemaakt van Moment (vereist ook het gebruik van het moment-timezone-pakket).
importeer moment uit 'moment-tijdzone';
functie getEventTimes(inputString, userTimeZone, targetTimeZone) { const timeFormat = 'MMM D, JJJJ, u:mm:ss a z';
// 1. Creëer het beginmoment in de tijdzone van de gebruiker const gebeurtenisTijd = moment.tz( invoerString, moment.ISO_8601, // Verwacht een ISO 8601-tekenreeks true, // Strikte parsering userTimeZone );
// Er wordt een fout gegenereerd als de inputString geen geldige datum vertegenwoordigt als (!eventTime.isValid()) { throw new Error('Ongeldige datum-/tijdinvoer'); }
// 2. Bereken de doeltijd // KRITIEK: We moeten klonen, anders verandert 'eventTime' voor altijd! const targetTime = eventTime.clone().tz(targetTimeZone);
terug { lokaal: eventTime.format(timeFormat), doel: targetTime.format(timeFormat), }; }
const schema = getEventTimes( '2026-03-05T15:00-05:00', 'Amerika/New York', 'Europa/Londen', );
console.log(schema.lokaal); // 5 maart 2026, 15:00:00 EST
console.log(schema.doel); // 5 maart 2026, 20:00:00 GMT
In dit voorbeeld gebruiken we de verwachte datumnotatie ISO 8601, die handig in Moment is ingebouwd. We gebruiken ook strikte parsering, wat betekent dat Moment niet zal proberen te raden met een datumreeks die niet overeenkomt met het formaat. Als een niet-ISO-datumtekenreeks wordt doorgegeven, resulteert dit in een ongeldig datumobject en genereren we een foutmelding. De Temporal-implementatie lijkt op elkaar, maar heeft een paar belangrijke verschillen.
functie getEventTimes(inputString, userTimeZone, targetTimeZone) { // 1. Parseer de invoer rechtstreeks in een Instant en maak deze vervolgens aan // een ZonedDateTime in de zone van de gebruiker. const instant = Tijdelijk.Instant.from(inputString); const eventTime = instant.toZonedDateTimeISO(userTimeZone);
// 2. Converteren naar de doelzone // Dit retourneert automatisch een NIEUW object; 'eventTime' is veilig. const targetTime = eventTime.withTimeZone(targetTimeZone);
// 3. Formatteer met Intl (ingebouwd) const-opties = { jaar: 'numeriek', maand: 'kort', dag: 'numeriek', uur: 'numeriek', minuut: '2 cijfers', tweede: '2-cijferig', tijdzonenaam: 'kort' };
terug { lokaal: eventTime.toLocaleString (navigator.taal, opties), doel: targetTime.toLocaleString (navigator.taal, opties) }; }
const schema = getEventTimes( '2026-03-05T15:00-05:00', 'Amerika/New York', 'Europa/Londen', );
console.log(schema.lokaal); // 5 maart 2026, 15:00:00 EST
console.log(schema.doel); // 5 maart 2026, 20:00:00 GMT
Met Moment moeten we expliciet een formatstring opgeven voor de resulterende datumstrings. Ongeacht de locatie of landinstelling van de gebruiker, worden de gebeurtenistijden altijd opgemaakt als 5 maart 2026, 3:00:00pm EST. We hoeven ook niet expliciet een uitzondering te maken. Als er een ongeldige tekenreeks wordt doorgegeven aan Temporal.Instant.from, genereert Temporal de uitzondering voor ons. Eén ding om op te merken is dat zelfs met strikte parsering de Moment-versie nog steeds soepeler is. Tijdelijk vereist de tijdzone-offset aan het einde van de tekenreeks. Houd er ook rekening mee dat, aangezien we navigator.taal gebruiken, deze code alleen in een browseromgeving kan worden uitgevoerd, omdat navigator niet is gedefinieerd in een Node.js-omgeving. De Temporal-implementatie gebruikt de huidige locale van de browser (navigator.taal), zodat de gebruiker automatisch de tijden van gebeurtenissen in hun lokale tijdnotatie krijgt opgemaakt. In de Amerikaanse regio is dit 5 maart 2026, 15:00:00 uur EST. Als de gebruiker zich echter bijvoorbeeld in Londen bevindt, worden de evenementtijden weergegeven als 5 maart 2026, 15:00:00 GMT-5. Samenvatting
Actie Moment.js Tijdelijk Huidige tijd moment() Tijdelijk.Now.zonedDateTimeISO() ISO parseren moment(str) Tijdelijk.Instant.from(str) Voeg tijd toe .add(7, 'dagen') (muteert) .add({ dagen: 7 }) (nieuw object) Verschil .diff(anders, 'uren') .sinds(andere).uren Tijdzone .tz('Zone/Naam') .withTimeZone('Zone/Naam')
Op het eerste gezicht kan het verschil iets anders zijn (en in het geval van Temporal, soms uitgebreider en strikter) syntaxis, maar er zijn verschillende belangrijke voordelen aan het gebruik van Temporal ten opzichte van Moment.js:
Explicieter zijn betekent minder verrassingen en onbedoelde bugs. Moment lijkt misschien milder, maar het gaat om ‘giswerk’, wat soms tot onjuiste datums kan leiden. Als u Temporal iets ongeldig geeft, wordt er een foutmelding gegenereerd. Als de code wordt uitgevoerd, weet je dat je een geldige datum hebt. Moment kan een aanzienlijke omvang toevoegen aan de bundel van de applicatie, vooral als u het moment-tijdzonepakket gebruikt. Temporal voegt niets toe (zodra het in uw doelbrowsers is verzonden). Onveranderlijkheid geeft u het vertrouwen dat u nooit gegevens verliest of overschrijft bij het uitvoeren van datumconversies en -bewerkingen. Verschillende weergaven van tijd (Instant, PlainDateTime, ZonedDateTime), afhankelijk van uw vereisten, waarbij Moment altijd een verpakking rond een UTC-tijdstempel is. Temporal gebruikt de Intl API's voor datumnotatie, wat betekent dat u locale-bewuste opmaak kunt gebruiken zonder dat u expliciet tokens hoeft op te geven.
Opmerkingen over de polyfill Zoals eerder vermeld, is er een Temporal polyfill beschikbaar, gedistribueerd als een npm-pakket met de naam @js-temporal/polyfill. Als je Temporal vandaag nog wilt gebruiken, heb je deze polyfill nodig om browsers zoals Safari te ondersteunen die de API nog niet hebben geleverd. Het slechte nieuws hiervan is dat het je bundelgrootte vergroot. Het goede nieuws is dat het nog steeds aanzienlijk minder toevoegt dan moment of moment-tijdzone. Hier is een vergelijking van de bundelgroottes zoals gerapporteerd door Bundlephobia.com, een website die informatie geeft over npm-pakketgroottes (klik op elke pakketnaam om de Bundlephobia-analyse te zien):
Pakket Verkleind Verkleind en geritst @js-temporeel/polyfill 154,1 kB 44,1 KB moment 294,4 kB 75,4 KB moment-tijdzone 1MB 114,2 KB
De polyfill heeft historisch gezien ook enkele prestatieproblemen gehad met betrekking tot geheugengebruik, en op het moment van schrijven wordt aangenomen dat deze zich in een alfastatus bevindt. Daarom wil je het misschien niet in productie gebruiken totdat het een meer volwassen staat heeft bereikt. Het andere goede nieuws is dat de polyfill hopelijk niet veel langer nodig zal zijn (tenzij je natuurlijk oudere browsers moet ondersteunen). Op het moment van schrijven is Temporal verkrijgbaar in Chrome, Edge en Firefox. Het is nog niet helemaal klaar in Safari, hoewel het beschikbaar lijkt te zijn met een runtime-vlag in de nieuwste Technology Preview.
