1
00:00:00,360 --> 00:00:01,480
Hello and welcome back.

2
00:00:01,710 --> 00:00:05,940
In this lesson, we're going to be setting the default date value of the date input.

3
00:00:06,120 --> 00:00:10,500
So we refresh it, we see that we don't have a default date set.

4
00:00:10,830 --> 00:00:13,860
So within JavaScript, there's a number of ways to do this.

5
00:00:14,680 --> 00:00:20,430
I'm going to listen for the DOM content loaded and then we're going to create that.

6
00:00:21,220 --> 00:00:24,040
Event content, that element content.

7
00:00:24,430 --> 00:00:28,560
So looking for Dom content loaded, which is going to trigger this.

8
00:00:28,900 --> 00:00:29,780
I'll make this bigger.

9
00:00:30,250 --> 00:00:37,270
What happens here is that whenever the DOM content has loaded, then we're ready to update and manipulate

10
00:00:37,270 --> 00:00:37,420
it.

11
00:00:37,690 --> 00:00:43,090
So this is just a failsafe to make sure that your DOM content is going to see that the DOM content is

12
00:00:43,090 --> 00:00:45,730
loaded and you get ready in the console.

13
00:00:45,880 --> 00:00:49,580
So that means that we're ready to update any one of the elements on the page.

14
00:00:49,900 --> 00:00:52,630
So the first thing that we want to do is we want to get a variable.

15
00:00:53,140 --> 00:00:55,350
We can get current now values.

16
00:00:55,350 --> 00:00:58,940
So doing a concert now, getting the new date values.

17
00:00:59,020 --> 00:01:02,370
Just using JavaScript Dete in order to get the date.

18
00:01:02,410 --> 00:01:08,100
Also, let's set a variable to taking that current date object of value.

19
00:01:08,380 --> 00:01:13,090
We're going to do get date, which is giving returns the day of the month for the specified date according

20
00:01:13,090 --> 00:01:16,630
to local time, and then adding in seven to that.

21
00:01:16,640 --> 00:01:18,630
So that's going to return back the next week.

22
00:01:19,270 --> 00:01:23,780
You can console log this out as well to see what the value that's going to be contained in there.

23
00:01:23,800 --> 00:01:29,500
So we're updating the current value and we're seeing that we're getting a date of nineteen.

24
00:01:29,750 --> 00:01:32,560
So that's the day of the week and today is the 12th.

25
00:01:32,770 --> 00:01:35,560
So adding seven to that returns back the 19.

26
00:01:35,560 --> 00:01:38,700
And we want to format it in the same way that it's formatted here.

27
00:01:38,710 --> 00:01:41,410
So we need a month, we need a date and we need a year.

28
00:01:41,590 --> 00:01:43,390
So let's get the year value.

29
00:01:43,510 --> 00:01:45,270
And this has to be two characters.

30
00:01:45,280 --> 00:01:46,870
So notice that it's two characters.

31
00:01:47,050 --> 00:01:53,620
So there's one more fix that we do need to apply here in case our date returns back as a single digit.

32
00:01:53,830 --> 00:01:55,900
We don't want that because that will throw an error.

33
00:01:56,050 --> 00:02:04,000
So let's set up the date where we create the date and using the value of next week that we just we're

34
00:02:04,000 --> 00:02:10,300
adding a zero in front of it as a string value and then taking that next week value.

35
00:02:10,300 --> 00:02:11,670
So adding that together.

36
00:02:11,800 --> 00:02:13,780
And then if we do a slice.

37
00:02:14,970 --> 00:02:22,680
Minus two, this was going to always ensure that we return back a value of at least two characters.

38
00:02:22,890 --> 00:02:24,070
So sure how that looks.

39
00:02:24,090 --> 00:02:30,810
So when we return back that day and I will have to subtract seven and we'll change that back afterwards,

40
00:02:30,960 --> 00:02:33,870
you're going to see that we're returning back zero five.

41
00:02:34,140 --> 00:02:39,450
And that's going to always ensure that we're returning back at least the two characters.

42
00:02:39,600 --> 00:02:42,930
And if there are two characters, then it's going to return back to the two.

43
00:02:42,930 --> 00:02:44,430
So that's how we can use slice.

44
00:02:44,580 --> 00:02:48,990
In order to do that, we need to do the same thing to get the month.

45
00:02:49,000 --> 00:02:50,620
So creating a month value.

46
00:02:50,880 --> 00:02:55,380
So this is going to be very similar to what we just did, but we don't have to increment it.

47
00:02:55,530 --> 00:02:58,760
But we do need to have the slice and the same format.

48
00:02:59,130 --> 00:03:04,560
So taking that value and instead of next week as we currently don't have a value.

49
00:03:04,920 --> 00:03:10,080
So let's break it in that and we'll do it within that same statement where we're getting the value of

50
00:03:10,080 --> 00:03:15,660
now and then using get month in order to return back the current month.

51
00:03:15,660 --> 00:03:16,200
No.

52
00:03:17,130 --> 00:03:23,310
And this month, number is going to be returned back within an array format, so the month will be January

53
00:03:23,310 --> 00:03:24,290
will be zero.

54
00:03:24,480 --> 00:03:27,700
So that's where we have to add at least one to that.

55
00:03:28,020 --> 00:03:32,730
So now if we have a month and if we have a day, you're going to see what it looks like.

56
00:03:32,760 --> 00:03:38,220
So we've got a month and we've got a day and you see that we've automatically added a zero in front

57
00:03:38,220 --> 00:03:38,850
of the month.

58
00:03:39,030 --> 00:03:44,240
So it's starting to look more like the format that we need and the last value that we need is a year.

59
00:03:44,550 --> 00:03:48,780
So the year is going to be returned back as the four characters.

60
00:03:49,020 --> 00:03:51,660
So we're good with the year where we take now.

61
00:03:51,810 --> 00:03:53,520
And we can just do get.

62
00:03:54,380 --> 00:04:01,370
Full year, and this will return back the full year value, that's the current year and you can see

63
00:04:01,370 --> 00:04:06,710
when we add that in and if I type year here, you can see that we're returning back the year.

64
00:04:06,980 --> 00:04:08,510
So we've got the formating.

65
00:04:08,510 --> 00:04:14,180
And the next thing that we need to do is just simply select that element and update the value so we

66
00:04:14,180 --> 00:04:21,980
can select the element using our document and query selector and select the elements.

67
00:04:22,190 --> 00:04:23,720
And we need to be specific here.

68
00:04:23,720 --> 00:04:28,660
So we're using input and selecting the input with a type of date.

69
00:04:29,780 --> 00:04:34,010
So any inputs that have a type of date are going to be selected within this object.

70
00:04:34,310 --> 00:04:41,630
And again, keeping it on one statement are going to set the value to be equal to and I'll make this

71
00:04:41,630 --> 00:04:42,580
bigger as well.

72
00:04:43,220 --> 00:04:46,220
So we're setting the value and we know that we've got our year.

73
00:04:46,250 --> 00:04:48,950
So the year is going to be the first value that we're setting.

74
00:04:51,180 --> 00:04:54,270
The next value that we can set is the month.

75
00:04:56,270 --> 00:05:01,520
And we can do it with dashes or slashes, and then lastly, the day that we want to set.

76
00:05:04,380 --> 00:05:10,080
Let's do a refresh and you can see that it sets the current date to be one week ahead.

77
00:05:10,110 --> 00:05:12,930
So currently it's the 12th and it's moving it to the 19th.

78
00:05:13,170 --> 00:05:19,350
So that's how you can use JavaScript in order to update the date object to represent a week ahead.

79
00:05:19,350 --> 00:05:22,770
And you can also adjust this if you want to, two weeks ahead or a month ahead.

80
00:05:22,960 --> 00:05:25,440
Then you can adjust the week accordingly.

81
00:05:25,590 --> 00:05:30,920
And of course, if you wanted a month, then you could add to that month, instead of updating the date,

82
00:05:31,050 --> 00:05:32,200
you could update the month.

83
00:05:32,220 --> 00:05:33,810
So there's a bunch of different options.

84
00:05:33,960 --> 00:05:39,380
And don't forget to do the slice minus two so that you always end up with at least two characters.

85
00:05:39,390 --> 00:05:44,970
And in this case, it doesn't matter that it's a string or a number, it's fine adding it into the date

86
00:05:44,970 --> 00:05:45,420
object.

87
00:05:45,540 --> 00:05:49,140
And you can also transform these into numbers if you want to utilize them.

88
00:05:49,290 --> 00:05:51,170
But it's not necessary in this case.

89
00:05:51,630 --> 00:05:53,280
So go ahead and add this into your project.

90
00:05:54,190 --> 00:05:59,260
Coming up next, we're going to handle some of the button selections from the user.