92

I want to convert current date into 'yyyy-MM-dd' format in .ts file. In template it can easily be done by using date pipe. How to do that in typescript?

In template:

{{date  | date:'yyyy-MM-dd'}}

How to convert in this format 'yyyy-MM-dd' in typescript?

I am just getting current date by using this.

this.date =  new Date();

but I need to convert it into the given format.

6

8 Answers 8

191

The date can be converted in typescript to this format 'yyyy-MM-dd' by using Datepipe

import { DatePipe } from '@angular/common'
...
constructor(public datepipe: DatePipe){}
...
myFunction(){
 this.date=new Date();
 let latest_date =this.datepipe.transform(this.date, 'yyyy-MM-dd');
}

and just add Datepipe in 'providers' array of app.module.ts. Like this:

import { DatePipe } from '@angular/common'
...
providers: [DatePipe]
3
  • 1
    From a back-end perspective this is a good answer especially if one is consuming an API and the call returns an ill-formatted date. Jan 24, 2017 at 8:25
  • 5
    you missed where to import this from: import { DatePipe } from '@angular/common'; May 9, 2017 at 21:05
  • 7
    now there's a built in formatDate() function, just import from @angular/common angular.io/api/common/formatDate
    – austin
    Mar 2, 2020 at 4:10
25

The same problem I faced in my project. Thanks to @Umar Rashed, but I am going to explain it in detail.

First, Provide Date Pipe from app.module:

providers: [DatePipe]

Import to your component and app.module:

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

Second, declare it under the constructor:

constructor(
    public datepipe: DatePipe
  ) {

Dates come from the server and parsed to console like this:

2000-09-19T00:00:00

I convert the date to how I need with this code; in TypeScript:

this.datepipe.transform(this.birthDate, 'dd/MM/yyyy')

Show from HTML template:

{{ user.birthDate }}

and it is seen like this:

19/09/2000

also seen on the web site like this: dates shown as it is filtered (click to see the screenshot)

1
  • 3
    Briliant , This is what developer need, not to append single day, month or year to create own format. cheers! mate... Thanks. Dec 4, 2020 at 18:25
17

You can also use formatDate

let formattedDt = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ssZZZZZ', 'en_US')
1
  • works well in the static method. thanks.
    – RED-ONE
    Dec 18, 2021 at 10:11
15

A simple solution would be to just write

this.date = new Date().toLocaleDateString();

date .toLocaleDateString() time .toLocaleTimeString() both .toLocaleString()

Hope this helps.

2
  • Friend I can get data perfect ex: 30/08/2018 (date from Brazil), but if I want get only day or month or only years , how to do this ? Aug 30, 2018 at 3:53
  • what you're looking for has been answered in the following SO question Sep 28, 2018 at 22:28
9

You can also try this.

consider today's date '28 Dec 2018'(for example)

 this.date = new Date().toISOString().slice(0,10); 

new Date() we get as: Fri Dec 28 2018 11:44:33 GMT+0530 (India Standard Time)

toISOString will convert to : 2018-12-28T06:15:27.479Z

slice(0,10) we get only first 10 characters as date which contains yyyy-mm-dd : 2018-12-28.

2
  • 1
    Note that the ISO string will be in the GMT timezone, so your day might be off-by-one either way, depending on your timezone.
    – mik01aj
    Nov 12, 2020 at 17:23
  • This answer is wrong. You completely missed the timezone. Have you tried the 2018-12-31T23:55:00.000Z?
    – youhans
    Aug 14, 2021 at 14:38
1

const formatDate=(dateObj)=>{
const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];

const dateOrdinal=(dom)=> {
    if (dom == 31 || dom == 21 || dom == 1) return dom + "st";
    else if (dom == 22 || dom == 2) return dom + "nd";
    else if (dom == 23 || dom == 3) return dom + "rd";
    else return dom + "th";
};
return dateOrdinal(dateObj.getDate())+', '+days[dateObj.getDay()]+' '+ months[dateObj.getMonth()]+', '+dateObj.getFullYear();
}
const ddate = new Date();
const result=formatDate(ddate)
document.getElementById("demo").innerHTML = result
<!DOCTYPE html>
<html>
<body>
<h2>Example:20th, Wednesday September, 2020 <h2>
<p id="demo"></p>
</body>
</html>

0

I would suggest you to have a look into Moment.js if you have trouble with Angular. At least it is a quick workaround without spending too much time.

1
  • i am getting this error when using moment cannot call a namespace('moment') Nov 7, 2016 at 7:15
0

Just use:

today:string = new Date().toJSON().slice(0,10).replace(/-/g,'/');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.