Good news if you're developing an Angular application that requires date displays: you've got lots of options.

In this guide, I'll go over how you can use DatePipe to quickly spit out some awesome formatting. I'll also show you how to create custom formats.

You can follow along or just go to the source code.

Ready? Let's get started.

About That DatePipe Thing...

So what is that DatePipe beast I mentioned earlier? As the name implies, it's a pipe.

If you're unfamiliar with pipes in Angular, they're functions you use to transform objects. You'll often use them to transform strings and numbers.

But you can also use them to transform dates. That's why you're here.

DatePipe lets you take a string, number, or Date object and display it as you see fit. The possibilities are almost limitless.

By the way, if you don't know about the Date object in TypeScript, you'll be happy to learn it gives you an easy way to create and set a date. Any date.

However, when it comes to handling dates, I like to stick with the raw number as much as possible. I prefer to store it the database and bounce it around in the code that way.

I only like to transform dates into human-readable form when humans need to read them. That is, on the user interface (UI).

In TypeScript, as in Java, you can store a date as a number representing the number of milliseconds since midnight (UTC) in the year 1970.

Some folks refer to that count as the number of milliseconds in "the current epoch." That sounds a bit too geological for me. But go with what you love.

Anyhoo, that number would be a Long in Java. But here in TypeScript it's just a number.

More on That Date Object

So what, exactly, is this Date object in TypeScript? And what can you do with it?

It's a bit of a misnomer, actually. The Date object doesn't just represent a date. It represents the time as well.

In fact, it takes the time all the way down to milliseconds. So you can get really precise with Date.

If you instantiate Date with an empty constuctor (new Date()), you'll get the current point in time.

Yep, down to the millisecond.

But you can also set any date and time you want in the Date object. If the current time is 4:00 PM and you'd like to set it to 5:00 PM, just change the time via setHours(). Like this:

let date: Date = new Date();
date.setHours(17);

Yeah. You gotta use military time for that.

Feel free to check out all the getters and setters that you can use with Date. 

Just keep in mind that the Date constructor is pretty powerful. It will parse a valid date string and give you an accurate timestamp.

let date: Date = new Date('Feb 05 2021 05:36:11 GMT-0500 (Eastern Standard Time)');
let pipe: DatePipe = new DatePipe('en-US');
console.log(pipe.transform(date, 'short'));

That will output 2/5/21, 5:36 AM. In other words, Date is smart enough to pick apart that lengthy string in the constructor without you, the application developer, telling it how to parse that string.

Translating the Date to a Number

Before you can translate the number to a human-readable date string output, you might need to first translate a Date object to a number. That's a breeze.

As is the case with Java, just call getTime() on the object. Consider this:

let date: Date = new Date();
console.log(date.getTime());

That one currently prints out 1612519345845. 

Again, that number represents the number of milliseconds since the Year of Our Lord 1970 began in Universal Time.

And if you parse that number, you'll find that I'm a morning person.

In fact, let me show you how to do that next.

let date: Date = new Date();
let dateNumber: number = date.getTime();

let pipe: DatePipe = new DatePipe('en-US');
console.log(pipe.transform(dateNumber, 'short'));

That code spits out: 2/5/21, 5:08 AM. 

Now take a moment to note how DatePipe gets instantiated. It's with a locale code ('en-US' or U.S. English).

You'll want to use the locale code specific to your area. If you're developing an application that's designed to go global, write some code that instantiates the DatePipe object based on the user's location.

For the purposes of this guide, I'll go over formatting for 'en-US'.

Also, you don't need to use DatePipe with a number. This would work just fine:

let date: Date = new Date();
let pipe: DatePipe = new DatePipe('en-US');
console.log(pipe.transform(date, 'short'));

So why use the number? Because you can store it in the database that way and then format it to your heart's content on any UI you choose. That's why.

Your mileage may vary, but that's how I roll.

Unicorn Variations

Okay, so now you now how to take the date as a number and make it look like 2/5/21, 5:08 AM. But what if you want to format it some other way?

Fortunately, you can do that.

In fact, let your imagination run wild. You'll find that you can pretty easily format the date to match just about any user requirement.

First, I'll go over some of the convenience formatters offered by DatePipe.

You've already seen 'short'. And you've also seen what it looks like: 2/5/21, 5:08.

But what about other options? Here they are:

  • 'medium' - Feb 5, 2021, 5:08:01 AM
  • 'long' - February 5, 2021 at 5:08:01 AM GMT+1
  • 'full' - Friday, February 5, 2021 at 5:08:01 AM GMT+01:00
  • 'shortDate' - 2/5/21
  • 'mediumDate' - Feb 5, 2021
  • 'longDate' - February 5, 2021
  • 'fullDate' - Friday, February 5, 2021
  • 'shortTIme' - 5:08 AM
  • 'mediumTime' - 5:08:01 AM
  • 'longTime' - 5:08:01 AM GMT+1
  • 'fullTime' - 5:08:01 AM GMT+01:00

Now I'd say odds are better than even money that whatever formatting you need to do with date and time is covered by one of those convenience codes. But in case it isn't, you still have options.

Custom Formatting the Date

Maybe you need to put the 0 in front of the month number when it's a single-digit month. Maybe you'd like to specify the era after the year ("Anno Domini"). Heck, maybe you'd like to use fractional seconds.

All those options are available to you. Just specify your own formatting code.

Fortunately, the folks at Angular created a table that you can reference to format the date and time as you see fit. 

Let's say you want to display just minutes and seconds as two-digit numbers separated by a colon. Go take a look at that table and you'll find that 'mm' specifies minutes as a two-digit number and 'ss' specifies seconds as a two-digit number.

Instead of using 'short' in the example above, you'd instead use 'mm:ss' to output the minutes and seconds. The code looks like this:

let date: Date = new Date('Feb 05 2021 05:36:11 GMT-0500 (Eastern Standard Time)');
let pipe: DatePipe = new DatePipe('en-US');
console.log(pipe.transform(date, 'mm:ss'));

That would output 36:11. 

And you've got lots of options besides that one.

Wrapping It Up

There you have it. A primer on how to display the date just about any way you want with Angular and DatePipe.

Now it's time to start using what you learned here to suit your own business interests.

Also, feel free to grab the code on GItHub.

Have fun!

Photo by Bich Tran from Pexels