Instructor: In this lecture, we're gonna display
the current month and year in our user interface
as soon as we start the application.
And so in this lecture, you're gonna learn
how to get the current date by using the
date object constructor.
So let's create a new method here in our UI controller
called displayMonth.
Okay, so we're gonna use the date object constructor
in order to save the current date into a new variable.
So let's call it now, so variable now is a new date,
so remember, with object constructors,
we have to use the new keyword such as we do
with our own object constructors, and then if we simply
don't paste anything into the date constructor,
then it will return the date of today.
We could also do it in a different way, so we could say
var, for example, Christmas, and then a new date,
and then we could paste into the year,
so this year, for example, 2016, then the month,
so for December, it's 11 because it's zero-based,
and then the date.
So this would return a date object
with the Christmas date of this year.
But that's not something so common to do.
So usually, we simply use it like this
to store the date of today.
And then, we can use methods to retrieve the current year,
or the current month, or the current day, or even
the minute or second in which this date object was created.
So let's start with the year
and create a variable called year,
and let me declare them up here, so var now, and year.
And later, also month, so remove this here.
So year is now, and this object now inherits a bunch
of methods from the date prototype.
And the one that we're gonna use here is getFullYear,
and this is gonna return, in case that it's 2016,
it's gonna return the year 2016.
So really easy.
Now, all we need to do is to display this on our web page.
So let's look at that to find out the class
and it's up here, so it's called budget title month.
So I initially only wanted to put the month here,
but now I'm gonna put the month and the year.
So this will be a new element to the DOMstring object,
so up here, and I'm calling it dateLabel.
So, then I'm going back here.
So now we can use document.querySelector
and DOMstrings and dateLabel,
and if we now set the textContent property of this
to our year, it should work.
So all we need to do now is to actually
call this method here.
And where's the best place to do that?
It's of course in the init function, right?
Because that's something that we want to happen
right in the beginning, after we start our app.
So I'm gonna say, UI controller dot displayMonth.
Maybe I should have called it displayDate,
but it doesn't really matter.
So let's see if this works, and actually no,
nothing happened here, so let's go back,
and yeah, here, I see the problem,
so I didn't actually call this function, this method, right?
So that was the problem.
Okay, now we have this weird,
I don't know what this is, so let me create some space here.
Function, getFullYear, so I guess I see what happened there,
so the problem is that in here, I also didn't
call this method, so of course this is a method,
so I have to call it.
So now, I'm sure it's gonna work.
Let's see, and yeah, so 2016, the current year.
If you're taking this course later,
then maybe you'll see 2017, but 2016 is right now,
as I'm recording this.
And now, let's get the month here, so I'm saying
month is now.getMonth.
So it's also really easy.
So month up here, and now, I simply say
month plus a space, and plus the year.
So let's see how that looks.
And yeah, so it gives me a number.
So month number eight.
And we already know that this is zero-based.
So now, we can do something very simple,
which is simply an array containing all of the month names.
So this is gonna be called month, okay?
So let me first declare it here, month,
and now let's write all of them here.
So we're already halfway through, now only six more left,
so July, August, September, October,
and now November and December.
So, something missing here, I'm all right,
and now what we want here, down here,
is no longer the month,
but the index number of month, right?
And remember, this is zero-based, so number zero
will be January, and the eight that we saw is not August,
but September, because September is the month number nine,
and so in a zero-based array, it's number eight.
So let's check this out.
So all right, available budget in September 2016.
So now you also know how to use dates in JavaScript.
So let's now move on together, right to the next lecture.