Hello and welcome back.
In this lesson, we're going to be setting the default date value of the date input.
So we refresh it, we see that we don't have a default date set.
So within JavaScript, there's a number of ways to do this.
I'm going to listen for the DOM content loaded and then we're going to create that.
Event content, that element content.
So looking for Dom content loaded, which is going to trigger this.
I'll make this bigger.
What happens here is that whenever the DOM content has loaded, then we're ready to update and manipulate
it.
So this is just a failsafe to make sure that your DOM content is going to see that the DOM content is
loaded and you get ready in the console.
So that means that we're ready to update any one of the elements on the page.
So the first thing that we want to do is we want to get a variable.
We can get current now values.
So doing a concert now, getting the new date values.
Just using JavaScript Dete in order to get the date.
Also, let's set a variable to taking that current date object of value.
We're going to do get date, which is giving returns the day of the month for the specified date according
to local time, and then adding in seven to that.
So that's going to return back the next week.
You can console log this out as well to see what the value that's going to be contained in there.
So we're updating the current value and we're seeing that we're getting a date of nineteen.
So that's the day of the week and today is the 12th.
So adding seven to that returns back the 19.
And we want to format it in the same way that it's formatted here.
So we need a month, we need a date and we need a year.
So let's get the year value.
And this has to be two characters.
So notice that it's two characters.
So there's one more fix that we do need to apply here in case our date returns back as a single digit.
We don't want that because that will throw an error.
So let's set up the date where we create the date and using the value of next week that we just we're
adding a zero in front of it as a string value and then taking that next week value.
So adding that together.
And then if we do a slice.
Minus two, this was going to always ensure that we return back a value of at least two characters.
So sure how that looks.
So when we return back that day and I will have to subtract seven and we'll change that back afterwards,
you're going to see that we're returning back zero five.
And that's going to always ensure that we're returning back at least the two characters.
And if there are two characters, then it's going to return back to the two.
So that's how we can use slice.
In order to do that, we need to do the same thing to get the month.
So creating a month value.
So this is going to be very similar to what we just did, but we don't have to increment it.
But we do need to have the slice and the same format.
So taking that value and instead of next week as we currently don't have a value.
So let's break it in that and we'll do it within that same statement where we're getting the value of
now and then using get month in order to return back the current month.
No.
And this month, number is going to be returned back within an array format, so the month will be January
will be zero.
So that's where we have to add at least one to that.
So now if we have a month and if we have a day, you're going to see what it looks like.
So we've got a month and we've got a day and you see that we've automatically added a zero in front
of the month.
So it's starting to look more like the format that we need and the last value that we need is a year.
So the year is going to be returned back as the four characters.
So we're good with the year where we take now.
And we can just do get.
Full year, and this will return back the full year value, that's the current year and you can see
when we add that in and if I type year here, you can see that we're returning back the year.
So we've got the formating.
And the next thing that we need to do is just simply select that element and update the value so we
can select the element using our document and query selector and select the elements.
And we need to be specific here.
So we're using input and selecting the input with a type of date.
So any inputs that have a type of date are going to be selected within this object.
And again, keeping it on one statement are going to set the value to be equal to and I'll make this
bigger as well.
So we're setting the value and we know that we've got our year.
So the year is going to be the first value that we're setting.
The next value that we can set is the month.
And we can do it with dashes or slashes, and then lastly, the day that we want to set.
Let's do a refresh and you can see that it sets the current date to be one week ahead.
So currently it's the 12th and it's moving it to the 19th.
So that's how you can use JavaScript in order to update the date object to represent a week ahead.
And you can also adjust this if you want to, two weeks ahead or a month ahead.
Then you can adjust the week accordingly.
And of course, if you wanted a month, then you could add to that month, instead of updating the date,
you could update the month.
So there's a bunch of different options.
And don't forget to do the slice minus two so that you always end up with at least two characters.
And in this case, it doesn't matter that it's a string or a number, it's fine adding it into the date
object.
And you can also transform these into numbers if you want to utilize them.
But it's not necessary in this case.
So go ahead and add this into your project.
Coming up next, we're going to handle some of the button selections from the user.