Angular 7

Angular 7 Date Format DatePipe Example using @angular/common

How to format date using DatePipe in Component of 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));
  }
}
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^