Original subtitles

When we built real world applications,

one type of data that comes up all the time

is dates and times.

So let's learn the fundamentals of dates and times

in this video so that in the next one,

we can then implement them into our application.

Now dates and time can be a little bit messy

and confusing in JavaScript.

And so just like with numbers,

I will try to make the fundamentals here

as clear as possible.

So first we need to actually create a date.

So create a date, and there are exactly four ways

of creating dates in JavaScript.

I mean, they all use the new date constructor function,

but they can accept different parameters.

So let's see how.

So the first way is simply

to use the new date constructor like this,

and then we can assign this to a variable

and let's just call it now.

And then here, I'm logging now to the console.

And so we get the current date and time at this very moment.

So you see it that Sunday August 2, 2020.

And plus this time here.

Next up the second way is to parse the date

from a date string.

So again, we use new date

and then we can pass in the string.

And for example, this string here would work just fine.

For example, just this part here.

Okay, so simply giving JavaScript a string here

and it will then automatically parse the time based on that.

And so that's the second date that we get here,

but we can also, of course, write a string ourselves.

For example, let's try Christmas here.

So we can even write December 24, 2015 or something.

And so indeed that works

and we even get the day of the week here.

So JavaScript is pretty smart in parsing out the string

that we write here.

Now however, it's generally not a good idea

to do this because it can be quite unreliable, now right?

However, if the string was actually created

by JavaScript itself, then of course it is pretty safe.

So actually in our accounts object or in our account one

for example, we now have these dates, so movement dates.

And so let's try to parse this string here.

So let's create a new date object in JavaScript

based on that string.

So that's in account1.movementdates and then zero.

All right.

So again, this is okay because it was JavaScript

who created that date that I just showed you there.

So this date here, and by the way,

this Z here means the UTC.

So that's the Coordinated Universal Time,

which is basically the time without any time zone in London

and also without daylight savings.

So that's based on a string, but we can also pass in year,

month, day, hour, minute,

hence even second into this constructor.

So let's say 2037 and 10, 19, 15,

23 minutes and five seconds.

So indeed we get November 19, 2037 at 15 hours, 23 minutes,

five seconds just as we have here.

Now, you might've noticed that here we have 10,

but November is actually the month 11, right?

And so that means that the month here

in JavaScript is zero based.

And that's a little bit weird, but well,

we can just get used to that, right.

Now, what's cool about this

is that JavaScript actually autocorrects the day.

So let's try this here again differently.

So let's try November 31st,

but we know that November only has 30 days, right?

And so if we take a look at this,

it will then autocorrect right to the next day.

So that's going to be December 1st

and we can even try November 33rd,

which should then be a December 3rd, okay.

So this sometimes is actually pretty useful.

Finally, we can also

pass into the date constructor function,

the amount of milliseconds passed since the beginning

of the Unix time, which is January 1, 1970,

so lets see that.

So again, new date and if we pass in zero,

so zero milliseconds after that initial Unix time,

then indeed we get January 1st, 1970.

Okay, and this will actually be pretty useful,

even though it looks a bit strange.

And let's now create a date that is three days after this.

And so that is essentially three times, which is three days.

And one day is made out of 24 hours,

which is made out of 60 minutes,

which is made out of 60 minutes,

which is made out of 1000 milliseconds.

And so this is how we convert from days to milliseconds.

So three days times 24 hours,

which is the number of hours in one day, times 60,

which is the number of minutes in one hour, then times 60,

which is the number of seconds in one minute,

and then times 1000 to convert two milliseconds.

And so now we get January 4th,

so that's exactly three days later.

Okay, and this number that we calculated here,

that's actually calculated also here.

So this is the timestamp.

So we call this year a timestamp

of the day number three, essentially.

And we will see why does this useful a little bit later.

Now these dates that we just created here are in fact,

just another special type of object.

And so therefore they have their own methods,

just like a race or maps or strengths.

And so we can use these methods to get,

or to set components of a date, all right.

So working with dates here

and let's now actually create a date again,

and this time we're gonna store it in a variable,

let's call it future.

So new date and let's actually use the same as this one.

Okay, just without the seconds, that's not really necessary.

Okay, let's just log into console here to make sure.

Okay, and let's for now at least

just comment out these here.

So we already know how it works.

Now, we just want to work a little bit

with this particular date

so we can use future,

which remember is simply this object here

and then the method get full year.

And so indeed we get 2037.

There's also get year, but never use that.

Okay, always use get full year.

Don't make the mistake of using that other one.

Next up, we have get month.

And remember that this one is zero based.

So 10 is actually the month number 11,

then we have get date.

And this is actually the day.

So I think that this method has a little bit of a weird name

and that's because get day

is actually not the day of the month,

but the day of the week, okay.

And zero here is Sunday and so four is Thursday.

So we saw already that it's Thursday.

And so that's equivalent to number four.

And then besides these, we also have three more,

which is get hour or hours, minutes and seconds.

So sometimes these can be pretty useful to work with a date.

Besides that we can also get a nicely formatted string.

So basically similar to what we have up here to ISO string.

All right.

So this is the ISO string,

which follows some kind of international standard.

And maybe you notice that this is actually similar

to the string that we used before coming from account one.

So that's movement dates, right?

So these were generated by exactly this method.

And so that's one of the very useful cases is when you want

to convert a particular date object into a string

that you can then store somewhere.

Finally, we can also get the timestamp for the date.

And remember that the timestamp is the milliseconds,

which have passed since January 1, 1970, so get time.

And so we see that this huge amount has passed

well, since that date.

And now we can take this number and reverse this.

So if we wanted we could now create a new date

only based on these milliseconds.

And it will then give us exactly that same time.

So you'll see it's the same as this one, right?

And so simply based on the milliseconds that have passed

since January 1, 1970.

And timestamps are actually so important

that there is a special method that we can use

to get the timestamp for right now.

So if you want simply the current timestamp

for this exact moment, then you don't even need

to create a new date.

All we have to do is to call date.now,

and that then gives us this timestamp.

Now, okay.

Finally, there are also the set versions

of all of these methods.

So let me just show you the one for the year.

So I'm not gonna go through all of them here.

And so future.setfullyear, and this again is a method.

So let's set it to 2040,

and then we can take a look at our date.

And so now it is November 19, 2040.

And of course, then the day of the month here has changed.

And so yeah, there also exists set month, set date,

set day and so on and so forth.

And these also perform autocorrection just like here,

when we create a new date, okay.

So that's basically all the methods that you need

to know about dates and these last here

are all quite intuitive and all you need to know really

is that there are all these different ways

of creating dates.

Now in the next video,

we will then sum up what we just learned here

to add dates to the bankers application

and make our project even better.