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 appponent.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 appponent.ts file without using HTML's.

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.

• javascript
• angular
• typescript
• date
• date-pipe

4 Answers 4

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

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.

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

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

It may be useful:)

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>