Angular 7 Date Format DatePipe Example using @angular/common

How to format date using DatePipe in Component of Angular 7?

How to Convert Current Date to YYYY-MM-DD format with Angular 7?

DatePipe - Formats a date value according to locale rules. 

For Updating date format we are using DatePipe from '@angular/common' and then use the below code.

You have to pass the locale string as an argument to DatePipe.

  var ddMMyyyy = this.datePipe.transform(new Date(),"dd-MM-yyyy");

Pre-defined format options:

1.      'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).

2.      'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).

3.      'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).

4.      'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).

5.      'shortDate': equivalent to 'M/d/yy' (6/15/15).

6.      'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).

7.      'longDate': equivalent to 'MMMM d, y' (June 15, 2015).

8.      'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).

9.      'shortTime': equivalent to 'h:mm a' (9:03 AM).

10. 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).

11. 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).

12. 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

Example:- In the first step, import DatePipe from '@angular/common' in the “app.module.ts” file.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

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

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [

    DatePipe

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

Import DatePipe in your components and construct it and it looks like.

import { Component, OnInit } from '@angular/core';

import { HttpClient, HttpHeaders} from  '@angular/common/http';

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

@Component({

  selector: 'Calr',

  templateUrl: './calr.component.html',

  styleUrls: ['./calr.component.css']

})

export class CalrComponent implements OnInit {

  constructor(private datePipe: DatePipe)

              {   }

  ngOnInit() {

    var ddMMyyyy = this.datePipe.transform(new Date(),"dd-MM-yyyy");

    console.log(ddMMyyyy); //output - 14-02-2019

    var MMddyyyy = this.datePipe.transform(new Date(),"MM-dd-yyyy");

    console.log(MMddyyyy); //output - 14-02-2019

    var short = this.datePipe.transform(new Date(),"M/d/yy");

    console.log(short); //output - 2/14/19

    var medium = this.datePipe.transform(new Date(),"MMM d, y, h:mm:ss a");

    console.log(medium); //output - Feb 14, 2019, 3:45:06 PM

  }

  onSubmit(){

    this.model.NextDate = this.datePipe.transform(this.model.NextDate,"dd-MM-yyyy");

    alert(JSON.stringify(this.model));

  }

}