Format date as dd/MM/yyyy using pipes

Jp_ picture Jp_ · Mar 2, 2016 · Viewed 602.9k times · Source

I'm using the date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible?

//our root app component
import {Component} from 'angular2/core'

  selector: 'my-app',
  providers: [],
  template: `
      <h2>Hello {{name}}</h2>
      <h3>{{date | date: 'ddMMyyyy'}}, should be 
      {{date | date: 'dd'}}/{{date | date:'MM'}}/{{date | date: 'yyyy'}}</h3>

  directives: []
export class App {
  constructor() { = 'Angular2' = new Date();

plnkr view


Fernando Leal picture Fernando Leal · Jun 20, 2016

Pipe date format bug fixed in Angular 2.0.0-rc.2, this Pull Request.

Now we can do the conventional way:

{{valueDate | date: 'dd/MM/yyyy'}}


Current Version:

Example Angular 8.x.x

Old Versions:

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

More info in documentation DatePipe