How to convert date into this 'yyyy-MM-dd' format in angular 2

AngularIonic2

Angular Problem Overview


I want to convert current data into 'yyyy-MM-dd' format in .ts file. i template it can easily be done by using data 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.

now i am just getting current date by using this.

this.date =  new Date();

but need to convert it into given format. Please guide how to do that... Thanks!

Angular Solutions


Solution 1 - Angular

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]

Solution 2 - Angular

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)

Solution 3 - Angular

A simple solution would be to just write

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

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

Hope this helps.

Solution 4 - Angular

You can also use formatDate

let formattedDt = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ssZZZZZ', 'en_US')

Solution 5 - Angular

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.

Solution 6 - Angular

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>

Solution 7 - Angular

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.

Solution 8 - Angular

Just use:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionUmar RasheedView Question on Stackoverflow
Solution 1 - AngularUmar RasheedView Answer on Stackoverflow
Solution 2 - AngularLuDeveloperView Answer on Stackoverflow
Solution 3 - AngularAhmed HamedView Answer on Stackoverflow
Solution 4 - AngularAbhishek SoniView Answer on Stackoverflow
Solution 5 - AngularVivekaView Answer on Stackoverflow
Solution 6 - AngularSaimumIslam27View Answer on Stackoverflow
Solution 7 - AngularchunhoongView Answer on Stackoverflow
Solution 8 - AngularA.CasanovaView Answer on Stackoverflow