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.

xdeepakv · Answer 1 · 2020-04-04T04:35:43.103

23

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

edited Apr 04 '20 at 04:35

answered May 10 '18 at 10:57

xdeepakv

6,631
2
16
26

got the error like "has no exported member 'formatdate'" in import {formatDate } from '@angular/common'; – Nikson May 10 '18 at 11:13
Yes it is not exposed below angular 6 :( It will come with angular 6. Check if u can upgrade. or use moment or dateformat https://github.com/angular/angular/issues/20536 – xdeepakv May 10 '18 at 17:54

score 21 · Accepted Answer · edited Jun 20 '20 at 09:12

21

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 10 '18 at 10:12

bereket gebredingle

5,722
2
26
40

I hv editted my answer. You need to install the dateformat package. That is why you are getting such error. – bereket gebredingle May 10 '18 at 10:20
Expected is 12 hour time format "10-05-2018 03:45:12 PM" – Nikson May 10 '18 at 10:29
@Nikson check it out now. U can use 12 or 24 hr option with simple trick. – bereket gebredingle May 10 '18 at 10:36
How can I see the output of your code using console ? – Nikson May 10 '18 at 10:38
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 ); } – Nikson May 10 '18 at 10:41
Is it right ? Because in console it returns lot of codes only not date and time – Nikson May 10 '18 at 10:42
@Nikson tell me if that did not fix it. – bereket gebredingle May 10 '18 at 10:48
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. – bereket gebredingle May 10 '18 at 10:55

score 1 · Answer 3 · answered May 10 '18 at 10:07

1

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

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

It may be useful:)

answered May 10 '18 at 10:07

Rajan Desai

81
1
11

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

3 Answers3

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

Linked

Related