Angular Date Pipe Example

Formatting Dates with Angular Custom Date Pipe


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.


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.

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.


Format Output Example
'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



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



#5 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



#6 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



#7 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



#8 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


#9 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


#10 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


#11 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

Field Format
Year y
Month M
Week of the year w
Week of the month W
Day of the month d
Week day E
Period a
Hour(1-12) h
Hour(0-23) H
Minute m
Second s

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


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
Angular Date Pipe Example Angular Date Pipe Example Reviewed by Unknown on October 31, 2018 Rating: 5

No comments:

Powered by Blogger.