Transcript

          Okay then.

So working with dates and times in JavaScript is already pretty easy to begin with, but sometimes formatting

dates and times in the right way for your application can mean writing a fair amount of code, and sometimes

it would probably just be easier to select a format that you want.

Write one line of code and then shazam you have it.

And it would also be nice if we could have some built in functions that work with dates to do things

like tell us if a date is in the past or the future, or maybe add a few days or weeks to a date, etcetera.

Now fortunately there is a JavaScript date and time library that can help us do just that, and it's

called date FNS.

So I'm going to visit this over in the browser.

It's at date.org and I'm going to leave this link attached to the lecture.

What you want to do is come down to the documentation and we can see all the different things that this

library can do on the left and there is a lot of things we can do.

So for example, we could use a method down here, which is is after so it checks to see if a date is

after another date or is before or is future is past, etcetera.

And all of these methods come loaded in to the date library.

Now, the one we're going to be looking at mainly is the format method.

So I'm going to type that at the search at the top, click on this and the format method lets us format

our dates in loads of different ways really, really easily.

So basically by using these different token values down here, we can decide really simply how we want

to format our dates.

So keep that there as a reference and come back to this page or bookmark it because you will be using

it.

But the first thing we need to do is actually get a reference to the date library inside our index file

over here because we're going to use it inside our projects or rather inside this chapter for now.

So first of all, let me come to the bottom of the file just above the current script.

I'm going to paste this one in.

You can get it from the repo or just pause the video and type this out and I'm going to save this.

Then I'm going to go over to sandbox and start using date FNS.

Now the first thing we need to do is create an ordinary JavaScript date.

We still work with those dates.

It's just that date FNS helps us manipulate those dates and do things with it.

So let's say const now is equal to a new date, much like we did before, and that gets us the date,

which is now.

Now then imagine we want to use a method to check if a certain date is today.

Then all we do is say, first of all, console dot log so we can see this in the console.

Then we use date FNS like that.

We get access to this object now because we loaded in the date library in the index.

If we didn't load that in, we obviously wouldn't have access to this.

But now we can use a method on this object called is today and then pass into this as a parameter the

date you want to check.

So now, for example, now this returns a Boolean and it's going to be true or false.

Now, hopefully this will be true because we've just created a new date, which is today.

So if we save that and have a look over here in the console, I'm going to press F12 to open this up

and we can see, true.

Now, if I go over here and pass in a load of random numbers, which is going to represent milliseconds

sometime in the past, I presume because it's not that long now, if we do this, it's not going to

be today, it's going to be some date in the past.

So this should be false and we can see false.

All right.

So that's how we generally use methods in date FNS.

We say date FNS, then dot the method and then pass our regular JavaScript date into that method.

So what I'd like to do now is comment that out and just show you how we can actually use date now to

format times and dates.

So formatting options.

And then beneath that I'm going to log these to the console each time.

So I'll say console, dot log, and then again we say date FNS.

Then the method name, which this time is format.

Now what we do is pass in two arguments into this method.

The first argument is going to be the actual date we want to format, which is now.

Then the second argument is going to be a series of tokens which determines how we're going to format

this date.

So remember on the website over here, if we take a look, we had all these different tokens which we

could use.

So if we were to use this, then it would print out the year in this format, etcetera.

So say I want to do that.

Let's use for YS as the second parameter in a string.

Like so it's going to take this current date and format it using this token.

So let me save that and come to the console.

And now we see we get the full date.

So let's do a few more examples.

I'm going to duplicate this line and change this Now to m m m m Oops, it should be all capitals.

Save that.

And that's going to get us.

The month in name format.

Now, if we take a look over here and we go to month, wherever that is, we can see that's what this

does.

If we do three M's, then it's going to get us a shorter month.

So this is how we use those codes.

So now let me do a few more examples.

I'm going to duplicate this and come down here and I'm going to use lowercase dee dee dee dee, save

it.

And now we can see we get the day.

Let's do another example.

I'm going to duplicate again, and this time I'm going to say D uppercase, then lowercase O So save

that.

What do you think this will get us?

It gets us the date.

So if we look over here, we can see d o gets us this date this way.

Okay, let's do one more.

And in this one, we'll combine a few of the things together.

So this time I'm going to say, first of all, we want d, d, d, d, which is the day of the week,

like Wednesday or Thursday.

Then we do a comma.

Then I'm going to say D o, which is this one right here.

Then I'm going to say m m m m comma.

Then why, why, why, why?

So we're chaining all of these together, basically.

And if I save and look over here now we can see we get this date output to the browser so we can take

off the commas if you want like this and just leave spaces and that's going to take off the commas in

the output over here.

I just use the commas to make it look a bit nicer.

Okay.

So that's a really nice way to format dates and we have all of this flexibility from these different

tokens right here.

So I'd advise you to browse through these and look for how you like to format dates and play around

with them.

Now, before when we compared dates, we subtracted one timestamp from another.

Now in date FNS we can do a similar thing, but we can do it in a slightly better way in my opinion.

So let me come down here and do a little comment that says comparing dates.

And first of all, I'm going to create a new constant called before and set this equal to a new date.

And I'm just going to paste in a date string now to make that date, which is going to be before and

this date is right here Feb first, 2019 at 12.

So we have that before date now and we have the now date.

So now I want to compare these and maybe get the distance between these dates in a formatted way in

words.

So we can do this.

I'm going to say console dot log, then I'm going to say date FAZ as we always do.

Then use a method called distance in words.

And this is a method that is going to get us the distance between these two dates, but format in a

nice way with words.

Now in here, first of all, we pass in the now date, then the before date as the second argument.

And then there's a third argument, which is an optional object and that contains options about how

a format in this I'm going to leave that off for now because we don't need it and I'm just going to

save it as this.

And take a look.

And now in the console, we can see about two months.

So this here was about two months ago compared to this.

Okay.

So now we could say something like add suffix and that is an option inside this option object.

And I'm going to set that to true.

And what that does is add a little thing to the end.

It says ago.

So if I save this now, we can see about two months ago.

So this is nice because if we have those blog posts or some kind of events that are in the past and

we still want to show a relative date, we can use this kind of method to do that and say, well, this

was about a month ago or this was about a week ago, or even in a chat room where we could say this

was sent ten minutes ago.

So this is date for my friends.

It's very powerful, very good.

And I would advise you to check out the documentation because this was just an introduction to the library.

It's got loads of things it can do and you can search all of those on the left hand side over here.

We will probably be using date FNS in a future project as well.

So this isn't the last we're going to see of it in this course.