Format date as dd/MM/yyyy using pipes

Question

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'

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

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
    this.date = new Date();
  }
}

plnkr view

Felipa

The date pipe has several issues currently. – Transmitter

This release candidate still feels a little bit unfinished. This is the second issue I stumbled in 2 days.. hopefully they will fix it soon. Creating your own pipes for this is option, but it feels a bit like duplication.. and you can remove it in a few months.. – Bulb

Possible duplicate of How to set locale in DatePipe in Angular2? – Zigrang

formats: angular.io/api/common/DatePipe – Hoyos

Answer 1

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'}}

---

Examples:

Current Version:

Example Angular 13

---

Old Versions:

Example Angular 8.x.x

Example Angular 7.x

Example Angular 6.x

Example Angular 4.x

Example Angular 2.x

---

More info in documentation DatePipe

Darwinism

thanks, just would like to append additional tips for IE11++ format issue, cf. #39728981 – Pentastyle

In Angular 5 this was apparently solved @boly38, follow the update in answer. And my answer in question linked: https://mcmap.net/q/88262/-angular2-date-pipe-does-not-work-in-ie-11-and-edge-13-14 – Darwinism

I'm getting date from API as dob: "2019-02-05 00:00:00" . I want to remove 00:00:00 and I have a template driven form in angular 6. My input field is given here. <input #dob="ngModel" [(ngModel)]="model.dob" [ngClass]="{ 'is-invalid': f.submitted && dob.invalid }" class="form-control" id="dob" name="dob" required type="date" /> how can I fix this ? – Brisbane

this will not be translateable. – Kenning

@AamerShahzad, what do you mean by "translateable"? I don't think I understood your question. – Darwinism

date: 'medium' works in angular 10, it will give you something like this - May 20, 2021, 11:28:53 PM – Huffy

Thanks! It's working on Angular 14.1.0 – Islas

Answer 2

Import DatePipe from angular/common and then use the below code:

var datePipe = new DatePipe();
    this.setDob = datePipe.transform(userdate, 'dd/MM/yyyy');

where userdate will be your date string. See if this helps.

Make note of the lowercase for date and year :

d - date
M - month
y - year

EDIT

You have to pass locale string as an argument to DatePipe, in latest angular. I have tested in angular 4.x

For Example:

var datePipe = new DatePipe('en-US');

Lucic

This, for some reason seems to be very heavy. We are doing the same thing (on change detection) and it is taking 75% of our app's execution time – Stratosphere

With Angular 2.1.1, this error is thrown Supplied parameters do not match any signature of call target. on new DatePipe() – Ostracoderm

You can use something like new DatePipe('en-US'); – Chishima

Hi, i want to this same format in angular2 like January 26, (i don't want to year) how? – Campball

HIPrashanth,I am getting the error 'Unhandled Promise rejection: No provider for DatePipe! '. – Cephalo

Answer 3

You can achieve this using by a simple custom pipe.

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'dd/MM/yyyy');
        return value;
    }
}

Template:

{{currentDate | dateFormatPipe }}

Advantage of using a custom pipe is that, if you want to update the date format in future, you can go and update your custom pipe and it will reflect every where.

Custom Pipe examples

Unmoral

Answer 4

Angular: 8.2.11

<td>{{ data.DateofBirth | date }}</td>

Output: Jun 9, 1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy' }}</td>

Output: 09/06/1973

<td>{{ data.DateofBirth | date: 'dd/MM/yyyy hh:mm a' }}</td>

Output: 09/06/1973 12:00 AM

Pompidou

The second and third example are the same and generate different output? – Felipa

use HH if you want 0-23 hour format – Shope

Answer 5

UPDATE:

Given Moment.js has been deprecated, this answer is not valid anymore. Currently, when I have to format some date, depending on the task, I use Javascript Date or date-fns is a good replacement for Moment.js date calculations (adding or removing days to dates, and so on...).

DO NOT USE THIS:

import { Pipe, PipeTransform } from '@angular/core'
import * as moment from 'moment'

@Pipe({
   name: 'formatDate'
})
export class DatePipe implements PipeTransform {
   transform(date: any, args?: any): any {
     let d = new Date(date)
     return moment(d).format('DD/MM/YYYY')
      
   }
}

And in the view:

{{ date | formatDate }}

Perrine

moment library is too big for a small job like the format! – Karissakarita

@Oriana, Nice answer. I use it this way; item.deferredStartDate = item.deferredStartDate ? moment(item.deferredStartDate).toDate() : null; It is quite as same as your implementation. – Sicilia

You should never use moment.js. It has security vulnerabilities. – Jacqualinejacquard

Answer 6

You have to pass the locale string as an argument to DatePipe.

var ddMMyyyy = this.datePipe.transform(new Date(),"dd-MM-yyyy");

Pre-defined format options:

1.      'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
2.      'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
3.      'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
4.      'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
5.      'shortDate': equivalent to 'M/d/yy' (6/15/15).
6.      'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
7.      'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
8.      'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
9.      'shortTime': equivalent to 'h:mm a' (9:03 AM).
10. 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
11. 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
12. 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

add datepipe in app.component.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DatePipe} from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    DatePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Pawsner

Answer 7

If anyone looking with time and timezone, this is for you

 {{data.ct | date :'dd-MMM-yy h:mm:ss a '}}

add z for time zone at the end of date and time format

 {{data.ct | date :'dd-MMM-yy h:mm:ss a z'}}

Czerny

Answer 8

I am using this Temporary Solution:

import {Pipe, PipeTransform} from "angular2/core";
import {DateFormatter} from 'angular2/src/facade/intl';

@Pipe({
    name: 'dateFormat'
})
export class DateFormat implements PipeTransform {
    transform(value: any, args: string[]): any {
        if (value) {
            var date = value instanceof Date ? value : new Date(value);
            return DateFormatter.format(date, 'pt', 'dd/MM/yyyy');
        }
    }
}

Ascend

I'm new to angular 2 and am having trouble getting this going. I added it in it's own TS file (compiled to js). I tried several things including adding it as a provider on app component then in the constructor of my child compoment but I couldn't get it to go. Error is; "The pipe 'dateFormat' could not be found". Can you give me a quick overview of how to implement this please. Here's the packages I'm using "dependencies": {"angular2": "2.0.0-beta.17","systemjs": "0.19.25", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.6.10"}, – Chalmers

Can you please plunker you code i will make correction. Please use latest version of angular2 – Ascend

@Deepakrao What is 'pt' here? And how do I call this pipe in my component? like let date=new DateFormat().transform(input); Please correct me. And what if I want to display hh:mm, i.e time – Poaceous

Answer 9

If anyone can looking to display date with time in AM or PM in angular 6 then this is for you.

{{date | date: 'dd/MM/yyyy hh:mm a'}}

Output

Pre-defined format options

Examples are given in en-US locale.

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

Reference Link

Terhune

Answer 10

You can find more information about the date pipe here, such as formats.

If you want to use it in your component, you can simply do

pipe = new DatePipe('en-US'); // Use your own locale

Now, you can simply use its transform method, which will be

const now = Date.now();
const myFormattedDate = this.pipe.transform(now, 'short');

Demisec

Answer 11

The only thing that worked for me was inspired from here: https://mcmap.net/q/88261/-how-to-set-locale-in-datepipe-in-angular-2

For pure dd/MM/yyyy, this worked for me, with angular 2 beta 16:

{{ myDate | date:'d'}}/{{ myDate | date:'MM'}}/{{ myDate | date:'y'}}

Nymphomania

this is quite a readable hack for beta versions, don't know why it was downvoted but I'll bring it back to zero ;) – Operculum

Answer 12

Date pipes does not behave correctly in Angular 2 with Typescript for Safari browser on MacOS and iOS. I faced this issue recently. I had to use moment js here for resolving the issue. Mentioning what I have done in short...

1. Add momentjs npm package in your project.

2. Under xyz.component.html, (Note here that startDateTime is of data type string)

{{ convertDateToString(objectName.startDateTime) }}

3. Under xyz.component.ts,

import * as moment from 'moment';

convertDateToString(dateToBeConverted: string) {
return moment(dateToBeConverted, "YYYY-MM-DD HH:mm:ss").format("DD-MMM-YYYY");
}

Loni

It would help if you showed the code that you used with momentjs so that anyone who wanted to try that solution won't have to still figure it out. – Madeline

Updated my comment with solution. Please check. – Loni

Answer 13

I think that it's because the locale is hardcoded into the DatePipe. See this link:

• https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/date_pipe.ts

And there is no way to update this locale by configuration right now.

Upsurge

The link is broken now – Nobile

Answer 14

In my case, I use in component file:

import {formatDate} from '@angular/common';

// Use your preferred locale
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';

// ....

displayDate: string;
registerLocaleData(localeFr, 'fr');
this.displayDate = formatDate(new Date(), 'EEEE d MMMM yyyy', 'fr');

And in the component HTML file

<h1> {{ displayDate }} </h1>

It works fine for me ;-)

Smug

Answer 15

It might be obvious to some, but if you want to have this date format

01.07.2022 (common in e.g. Germany)

you can simply do this:

{{ myDate | date: "dd.MM.yyyy" }}

Trundle

Answer 16

You can also use momentjs for this sort of things. Momentjs is best at parse, validate, manipulate, and display dates in JavaScript.

I used this pipe from Urish, which works fine for me:

https://github.com/urish/angular2-moment/blob/master/src/DateFormatPipe.ts

In the args parameter you can put your date format like: "dd/mm/yyyy"

Timoshenko

link broken, link is now github.com/urish/angular2-moment/blob/master/src/… – Keane

You should never use moment.js. It has security vulnerabilities. – Jacqualinejacquard

Answer 17

In my case, I was using a date string of format dd/MM/yyyy and was trying to convert it into a different format.

And this error struck me InvalidPipeArgument.

After some googling, I found that the date string should be in the ISO-recognized format.

Hazardous