Angular Date Pipe Example

In Angular, We have a few built-in pipes. In this blog post, we’ll learn about Date pipe in Angular.

We’ll see an example of using Date Pipe with different options.
In Angular, Pipe is something that takes in data as input and transforms it to the desired output.

Date Pipe

DatePipe is an API provided by angular. It is part of angular CommonModule.   DatePipe localizing date in en-US language. If you want to localize dates in other languages you need to import corresponding locale data.

Angular Date Pipe allows us to format dates in Angular using the requested format, time zone & local information. It comes with built-in pre-defined formats. We can also customize the date format by creating custom format strings. We can set the time zone, country locale, etc.

Basic Format

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}   Now let’s understand each fraction one by one.

value_expression:

– it can be a Date object
– it can be number(in milliseconds) 
– it can be an ISO string.


Examples

1) Date Object Example:

We can declare value_expresssion as Date object in a component file as below.


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>Today is {{ today | date }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

In the above code, we’ve used Date.now() to get the current date and time.

Output:

Today is Oct 31, 2018

2) Number(milliseconds)

We can declare value_expresssion as Number in a component file as below.


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>Today is {{ today | date }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = 1541000663839;
}

Output:

Today is Oct 31, 2018

3) ISO String

We can declare value_expresssion as ISO String in a component file as below.


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>Today is {{ today | date }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: string = "Wed Oct 05 2011 16:48:00 GMT+0200";
}

Output:

Today is Oct 5, 2011

Parameters

It has the following 3 parameters.

1) format

The date/time components to include, using predefined options or a custom format string. Optional. Default is ‘mediumDate’.   Angular has few pre-defined formats.

FormatOutputExample
‘short’‘M/d/yy, h:mm a’6/15/15, 9:03 AM
‘medium’‘MMM d, y, h:mm:ss a’Jun 15, 2015, 9:03:01 AM
‘long’‘MMMM d, y, h:mm:ss a z’June 15, 2015 at 9:03:01 AM GMT+1
‘full’‘EEEE, MMMM d, y, h:mm:ss a zzzz’Monday, June 15, 2015 at 9:03:01 AM GMT+01:00
‘shortDate’‘M/d/yy’6/15/15
‘mediumDate’‘MMM d, y’Jun 15, 2015
‘longDate’‘MMMM d, y’June 15, 2015
‘fullDate’‘EEEE, MMMM d, y’Monday, June 15, 2015
‘shortTime’‘h:mm a’9:03 AM
‘mediumTime’‘h:mm:ss a’9:03:01 AM
‘longTime’‘h:mm:ss a z’9:03:01 AM GMT+1
‘fullTime’‘h:mm:ss a zzzz’9:03:01 AM GMT+01:00

2) timezone

A timezone offset (such as ‘+0430’), or a standard UTC/GMT or continental US timezone abbreviation. Default is the local system timezone of the end-user’s machine.   Optional. Default is undefined.

3) locale

A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.    Optional. Default is undefined.


Examples

#1 Angular DatePipe format: short


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "short" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

10/31/18, 10:32 PM

#2 Angular DatePipe format: medium


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "medium" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

Oct 31, 2018, 10:42:27 PM

#3 Angular DatePipe format: long


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "long" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

October 31, 2018 at 10:51:12 PM GMT+5

#4 Angular DatePipe format: full


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "full" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

Wednesday, October 31, 2018 at 10:52:21 PM GMT+05:30

#5 Angular DatePipe format: shortDate


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "shortDate" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

10/31/18

#6 Angular DatePipe format: mediumDate


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "mediumDate" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

Oct 31, 2018

#7 Angular DatePipe format: longDate


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "longDate" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

October 31, 2018

#8 Angular DatePipe format: fullDate


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "fullDate" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

Wednesday, October 31, 2018

#9 Angular DatePipe format: shortTime


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "shortTime" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

10:55 PM

#10 Angular DatePipe format: mediumTime


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "mediumTime" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

10:56:44 PM

#11 Angular DatePipe format: longTime


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "longTime" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

10:58:16 PM GMT+5

#12 Angular DatePipe format: fullTime


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "fullTime" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

10:57:56 PM GMT+05:30

Custom format options

FieldFormat
Yeary
MonthM
Week of the yearw
Week of the monthW
Day of the monthd
Week dayE
Perioda
Hour(1-12)h
Hour(0-23)H
Minutem
Seconds

You can read more about custom format options for official angular docs: Angular DatePipe Custom Format Options


Custom Format Examples

#1 Angular Custom Format Example


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "dd/MM/yyyy" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

31/10/2018

#2 Angular Custom Format Example 


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "dd/MM/yyyy HH:mm:ss" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

31/10/2018 23:33:05

#3 Angular Custom Format Example


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: 'HH:mm:ss' }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

23:33:05

#4 Angular Custom Format Example


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "MM/dd/yyyy" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

10/31/2018

#5 Angular Custom Format Example


@Component({
  selector: "date-pipe",
  template: `
    <div>
      <p>{{ today | date: "dd MMM yyyy" }}</p>
    </div>
  `
})
export class DatePipeComponent {
  today: number = Date.now();
}

Output:

31 Oct 2018

Also, read:

If you like this post, please share it with your friends.
Thanks.