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

javascript angular typescript date date-pipe

109,969

Solution 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.

Solution 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

Solution 3

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

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

It may be useful:)

109,969

Author by

Nikson

Updated on October 22, 2021

Comments

Nikson over 2 years
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.
bereket gebredingle almost 6 years

I hv editted my answer. You need to install the dateformat package. That is why you are getting such error.
Nikson almost 6 years

Expected is 12 hour time format "10-05-2018 03:45:12 PM"
bereket gebredingle almost 6 years

@Nikson check it out now. U can use 12 or 24 hr option with simple trick.
Nikson almost 6 years

How can I see the output of your code using console ?
Nikson almost 6 years

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 almost 6 years

Is it right ? Because in console it returns lot of codes only not date and time
bereket gebredingle almost 6 years

@Nikson tell me if that did not fix it.
bereket gebredingle almost 6 years

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.
Nikson almost 6 years

got the error like "has no exported member 'formatdate'" in import {formatDate } from '@angular/common';
xdeepakv almost 6 years

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