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 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).
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: 'APRCalculator',
templateUrl: './calculator.component.html',
styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent 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.NextPayDate = this.datePipe.transform(this.model.NextPayDate,"dd-MM-yyyy");
alert(JSON.stringify(this.model));
}
}
|
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..
|
