Jonas: 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 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.