How to format date using DatePipe in Component ofAngular 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 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 its 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));
}
}