Dates in JS and the Temporal proposal

you can check the original post on my blog in both english and spanish

If you're a developer, you have used dates at a certain point in your life, and if you have used dates, you probably had a hard time

Most people agree with me. Handling dates in Javascript can be painful by itself, that's why the community created libraries like momentjs, date-fns, luxon, dayjs, and some others that are doing a great job! But first of all, I want to talk about this old man and probably the parent of all the other ones: MomentJS

A little bit of history

MomentJS was and is still a really powerful library, it was the go-to library for dates of almost everybody until recently, we have to keep in mind that this library was built in 2011, which for javascript that's like a long time ago and things have been evolving a lot (just to give you more context, ES6 was released on June 2015) so this library was built before all that.

After people started realizing that MomentJS was kind of heavy and that newer and faster alternatives were starting to appear, the end of MomentJS was getting close (I'm not saying that you won't be able to use the library, but now it's not recommended to do it anymore), the main pain point of MomentJS was the lack of support for "Tree shaking".

Last year the Chrome Dev Tools started complaining about the size of a website and recommending to switch from momentJS to another alternative which is kinda forcing the developers to close the cycle and put an end to the MomentJS era.

Last but not least, I appreciate all the hard work that the team behind MomentJS has been doing over the years, and thanks to the effort they're helping to shape the future of native JS date handling features.

The arrival of Temporal

Temporal is a proposal that wants to be included in future JS versions (ES6, ES7 which all of this is handled by TC39) to provide native support for date handling for the browser without the need of external libraries, this isn't just because of how hard was to handle dates before, but because almost every website now includes one date library (date-fns, dayjs, etc..) and every time you visit a page you're constantly downloading the code for one of these libraries which takes some time that we can save by having a native solution that works well (Sorry not sorry Date Object)

Let's get started with some code samples

I know I know... I'm boring you with some date and JS history but it was kinda important to get some context, now let's get to the fun part, start implementing some basic date handling functions!

since the proposal hasn't been accepted yet, we need to use the Temporal polyfill to use all its functions

$ npm install --save proposal-temporal

const { Temporal } = require('proposal-temporal');

//Or, import it as an ES6 module:
import { Temporal } from 'proposal-temporal/lib/index.mjs';

To handle and play with the current time we make use of the Temporal.now Object, which contains a couple of functions to get the date in different formats / different timezones


Temporal.now = {
    instant: [Function: instant$1],
    plainDateTime: [Function: plainDateTime],
    plainDateTimeISO: [Function: plainDateTimeISO],
    plainDate: [Function: plainDate],
    plainDateISO: [Function: plainDateISO],
    plainTimeISO: [Function: plainTimeISO],
    timeZone: [Function: timeZone],
    zonedDateTime: [Function: zonedDateTime],
    zonedDateTimeISO: [Function: zonedDateTimeISO]
}
Temporal.now.instant() // Temporal.Instant <2021-04-13T00:35:19.899119896Z>
Temporal.now.timeZone() // Temporal.TimeZone <America/Chihuahua>

Plain Dates, Times, DateTimes

Temporal adds a couple of classes that I group because they're all "plain", but also include a lot of methods inside of them to make them powerful, keep in mind that we need to initialize them first

const date = new Temporal.PlainDate(2020, 05, 22); // Temporal.PlainDate <2020-05-22
const time = new Temporal.PlainTime(04, 20); // Temporal.PlainTime <04:20:00>

// we can also use some properties to get cool info
const daysInWeek = date.daysInWeek; // 7
const daysInMonth = date.daysInMonth; //31

Some date difference sample

the duration on this sample marked by <P862D> is from the ISO 8601 which starts with a P (for Period) and a T (for time)

const temporalStart = new Temporal.PlainDate(1997, 05, 22);
const temporalEnd = new Temporal.PlainDate(1999, 10, 01);
const temporalDiff = temporalEnd.since(temporalStart);
d = Temporal.Duration.from(temporalDiff); 
// in this sample 
// d = Temporal.Duration <P862D> {
//   days: 862
// }

Timezones

Timezones are key when building web apps that target users all across the globe and can also be difficult to play with and even to wrap your head around outside of a programming context (or at least for me it's too hard haha)

//know the time at London
Temporal.now.zonedDateTimeISO('Europe/London') //Temporal.ZonedDateTime <2021-04-13T02:26:27.448187407+01:00[Europe/London]>

Sources

Blog