All language subtitles for 5. Adding a Date Picker

In this video we're going to start working on this next input right here that is gonna track an input

date we're going to eventually add in a new pipe that is going to allow us to take the data that the

user enters right here and print it out in a very nice formatted manner.

Let's get to it.

Well first start by going over to our component class.

I'm going to add on a new property to my app component called Date.

This will be a string.

It'll be whatever date the user enters.

I'll then also define a method inside of here called on date change which we will use to eventually

update the value of that property on side of your will receive some kind of value as a string.

Then use it to update the start date.

That looks good.

Now let's go back over to our template.

HERE IT IS RIGHT HERE.

I'M GOING TO FIND THAT BIG div with class row.

When do we just put together a moment to go.

But there's the divide class row.

Inside there is the form group and the other class of div right there as well.

Going to duplicate this entire section right here and we'll go through and just change a couple of different

names.

We don't have to write out all this safety mail again I'm going to copy that entire thing and then paste

it directly underneath

what I'm going to zoom back in here.

I'm going to change a couple of different labels and whatnot inside make sure that's really clear that

this is some kind of date input.

I'm going to make sure that I have a label of payment dates going to change the name of the callback

on the input element to on dates change.

I'm going to change the name inside the label down here to payment eight.

I'm going to update the string interpolation to just say date we won't worry about a pipe just yet.

I mean finally really most important thing here is to find that input element.

I'm going to add a type of date to it that's going to cause our browser to show a nicely formatted date

picker to our users.

And it's just going to ensure that a user enters the correct format for us.

So going to save this I'll go back with my browser and test this thing out.

We're going to immediately see this new section right here.

And here is the date picker element.

You'll notice that my date picker is in the format of month day and year if your environment is configured

differently.

And when I say environment I'm talking about your browser and the language you're using on your computer

you might see a different form out of date right here specifically they then the month and then the

year everything should eventually work out regardless.

Then site here I can manually enter and be like 12 12 1912 and we'll see the results of a change event

or an input event on that input right there is going to be a string that formats the date as the year

then the month and the day maybe I should actually change the date to be something else.

There we go.

So you're on a 10 day they're just working at the string like this is not super useful for us.

We want to have something that eventually looks like that right there.

So the month as a full month name and the day and then a comma and then the year let's take a pause

right here.

We're going to come back the next video and figure out how we can use a new pipe that we're gonna learn

about the format the string in a much better fashion.