All language subtitles for 6. Formatting Dates

Now that we are printing out this date let's take a look at another pipe that we can use to very easily

format dates with Angular.

I'm gonna go back to that API list.

I'm going to find the documentation for the data byte we can use this pipe to format some kind of date

automatically.

The syntax is very similar to the title case one that we just used a moment ago.

We're gonna write out some value or some expression in the pipe symbol and just the word date by itself.

Everything else you see list inside of here are some options so we can use to customize the format in

which the date gets printed out.

Right now let's just try to use the date pipe by itself.

I'll go back over to my template a find where we are printing out date and I'll write in the date pipe

like so.

And the reason that I chose that property name of dates inside of our actual component right here is

so I can kind of highlight one very confusing thing that you're going to run into rather quickly when

you start to work with dates though on the left hand side is a reference to a property on our app component.

If I mouse over it we'll see yep that's exactly what it is.

Then on the right hand side is the date height.

These are two very different things but it's really confusing to look at this right now.

Well I would highly recommend that wherever possible rather than using property names or stuff like

that that you're going to write out inside a template of dates.

You ever expect to actually format that with the date pipe.

Maybe try to use a different property name and date is otherwise you end up with a scenario right here

where it starts to get a little bit confusing about what's going on.

Again on the left is the property name on our class on the right is the date pipe that out of the way.

Let's see this and just see what happens.

I'll go back over to my application I'll enter in a month a day and a year you'll notice right away

that we get this nicely formatted date.

If your date looks a little bit different than mine that is totally fine angular reads some settings

inside your browser to figure out how it should format the date again if you see something different.

Only OK.

Let's take a look at some documentation around pipe and get a better idea of how to format this thing

in particular if we look back at our markup remember we want to show the word of DEC or whatever month

we selected and then the day then a comma and then the full year.

Let's take a look at the documentation and understand how to do that on the date pipe documentation

page we can scroll down a little bit with section that is called custom format option a custom format

options tells you exactly how to write out a date with any format you can possibly imagine.

For example let me show you how we would write out just the day by itself.

Like I want to see just the day just the number 15 do so I would look on this table and find a section

telling me how to print out days of the month year era.

There is year there is month week day week in the month and finally day of the month.

That's what we're looking for.

But then going to find out the different options here.

Which one is most appropriate for our use case.

So these two options right here are saying that we can either just print out the day by itself like

the number 1 1 5 4 15 and so on.

Or alternatively we can print out the date in such a way that always two digits are showing.

So in other words if the day is 1 like the first day of the year there will be a 0 added to the left

hand side just to arbitrarily increase the number of digits to do let's try using the very simple way

right here.

But I want to print out just the day by itself and to do so I would write in the code of the lowercase

d.

But where do we write that.

Well we need to figure out how to provide arguments to a pipe.

Let's go back over to our editor and figure that out.

To provide an argument to a pipe you write in a colon right after the pipe well then put in double quotes

to form a string and then inside there it will write in whatever we want to provide you that pipe as

an argument in our case we want to provide an argument of just lowercase d inside that string which

is going to tell the pipe to print out our date a little bit differently open in lowercase d like so

then save this I will flip back over now if I enter in 12 15 1950 you'll see that I only get the date

by itself we can reference this table and use these little character codes right here.

These little kind of like w w w E's all these different codes right here to exactly customize how the

date gets printed out.

We can also repeat these things as many times as we want.

For example I couldn't put in like so I can even put in like dashes in there flashes whatever you can

possibly imagine.

If I try to run that now I'm going to see a very funny looking date but it will print out regardless.

I'll see 15 printed over and over and over again I get those dashes and slashes that's pretty much it

for the date pipe.

All you really need to know is that well the date pipe exists if you ever want to custom format it.

Take a look at this.

A steam table right here this you know something else so you might make yourself right above that section

or a couple of reformatted ways to print out your date as well.

For example if we provide a argument of short dates that would be equivalent to or getting something

like a month and the day and then a two digit year at the end.

Then some scenarios this might actually match up with what you are trying to do as a matter of fact.

Here's long date right here that actually matches the date format that you and I are trying to show

which is the long month of a day and then the year with a comma in between the date and the year but

just for some practice rather than using this shortcut.

Let's use the custom format options and figure out how we would do this ourselves.

We would first need to look up the character code to print out the old month we'll look that up really

quickly.

Here's a month section right here.

Print out a full month name.

We write out for capital ends in a row.

I would go back over inside the string but in or capital ends.

Next up we want to show a single day or day the month.

We just looked at that section.

It's a little bit lower.

We'll fine day the month lowercase d but in lowercase Do you like so next is a comma.

Well that's pretty straightforward.

All we have to do is a comma.

And then finally a four digit year a very four digit year.

I'll scroll back up find the year section.

Here it is right here but a printout a year by itself.

You just have to do lowercase Y.

I'll go back over and then do lowercase y and that should be at I'm going to say this one last test

here.

I'll put in December 15th 1950.

There we go.

Looks very good.

OK.

So again that is the date pipe.

Again you really just need to know that it exists.

You can use either these custom form matters or the shortcuts either one.

Totally fine.

Now we've got this pipe put together.

Let's take a pause right here and then move on to our last built in pipe in the next video.