How to get date and time in Angular 4,5,6 and above using DatePipe

Question

I am working in an angular 4 application, Here I need to get the current Date and Time Using angular DatePipe.

I want to get the date and time in the following format

dd-mm-yyyy hh:MM:ss AM/PM

I got the expected by using the Angular DatePipe as follows

<p>{{today | date:'dd-MM-yyyy hh:mm:ss a':'+0530'}}</p> 

output :

10-05-2018 03:28:57 PM

Here I What I want to do is get the same output from my app.component.ts without touching the HTML's

So I tried the below code but it generates a 13 digit timestamp

today = Date.now();
    fixedTimezone = this.today;

SO how can I get the date and time as the mentioned format purely from app.component.ts file without using HTML's.

Unquiet

Answer 1

let dateFormat = require('dateformat');
let now = new Date();
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");

---

Thursday, May 10th, 2018, 7:11:21 AM 

---

And this format is exactly like your question

dateFormat(now, "dd, mm, yyyy, h:MM:ss TT"); 

returns 10, 05, 2018 7:26:57 PM

you need npm package npm i dateformat here is a link for the npm package https://www.npmjs.com/package/dateformat

Here is another question that inspires me How to format a JavaScript date

---

h:MM:ss TT results 7:26:57 PM

HH:MM:ss results 13:26:57

Here is it https://jsfiddle.net/5z1tLspw/

I hope that helps.

Pyrimidine

I hv editted my answer. You need to install the dateformat package. That is why you are getting such error. – Pyrimidine

Expected is 12 hour time format "10-05-2018 03:45:12 PM" – Unquiet

@Unquiet check it out now. U can use 12 or 24 hr option with simple trick. – Pyrimidine

How can I see the output of your code using console ? – Unquiet

get_Date_Time(){ let dateFormat = require('dateformat'); let now = new Date(); dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT"); console.log("date :" + dateFormat ); } – Unquiet

Is it right ? Because in console it returns lot of codes only not date and time – Unquiet

@Unquiet tell me if that did not fix it. – Pyrimidine

Man at the end of the code there is an alert code you can change that to console.log or anything you want. Next the code use today's date so you can pass the date you get from API. So now I think you can change a date to a format you need. Gud day. – Pyrimidine

Answer 2

Will works on Angular 6 or above

You don't need any 3rd party library. You can format using angular method/util. import formatDate from the common package and pass other data. See the below-given example.

import { Component } from '@angular/core';
import {formatDate } from '@angular/common';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  today= new Date();
  jstoday = '';
  constructor() {
    this.jstoday = formatDate(this.today, 'dd-MM-yyyy hh:mm:ss a', 'en-US', '+0530');
  }
}

stackblitz: https://stackblitz.com/edit/angular-vjosat?file=src%2Fapp%2Fapp.component.ts

Overzealous

got the error like "has no exported member 'formatdate'" in import {formatDate } from '@angular/common'; – Unquiet

Yes it is not exposed below angular 6 :( It will come with angular 6. Check if u can upgrade. or use moment or dateformat github.com/angular/angular/issues/20536 – Overzealous

Answer 3

Uses the function formatDate to format a date according to locale rules.

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

It may be useful:)

Plod

Answer 4

To get formatted date in Angular we can use Angular Datepipe.

For an example we can use following code to get formatted date in our code.

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

@Component({
    selector: 'app-name-class',
    templateUrl: './name.component.html',
    styleUrls: ['./name.component.scss']
})

export class NameComponent implements OnInit {
  
  // define datepipe

  datePipe: DatePipe = new DatePipe('en-US');
  
  constructor(){}

  // method to get formatted date

  getFormattedDate(){
    
    var date = new Date();
    var transformDate = this.datePipe.transform(date, 'yyyy-MM-dd');
    return transformDate;

  }
}

After that you can user getFormattedDate() method inside your html code.

<p>{{getFormattedDate()}}</p>

Stigma