En este artículo vamos a ver qué es formatDate en Angular 10 y cómo usarlo. formatDate se utiliza para f
formatDate(value, locale, format, timezone)
Parámetros:
- valor:
- lugar:
- formato:
NgModule: el módulo utilizado por formatDate es:
- CommonModule
Acercarse:
- Cree la aplicación Angular que se utilizará.
- En app.module.ts importa LOCALE_ID porque necesitamos que se importe la configuración regional para usar get formatDate.
import { LOCALE_ID, NgModule } from '@angular/core';
- En app.component.ts importar formatDate y LOCALE_ID
- inyecta LOCALE_ID como una variable pública.
- En app.component.html muestra la variable local usando la interpolación de strings
- Sirva la aplicación angular usando ng serve para ver el resultado.
Ejemplo 1:
app.component.ts
import { formatDate } from '@angular/common'; import {Component, Inject, LOCALE_ID } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { curr = formatDate("02-feburary-0202", 'dd-MM-yyyy' ,this.locale); constructor( @Inject(LOCALE_ID) public locale: string,){} }
app.component.html
<h1> GeeksforGeeks </h1> <p>Locale Date is : {{curr}}</p>
Producción:
Ejemplo 2:
app.component.ts
import { formatDate } from '@angular/common'; import {Component, Inject, LOCALE_ID } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { curr = formatDate("03-march-0303", 'yyyy-dd-MM' ,this.locale); constructor( @Inject(LOCALE_ID) public locale: string,){} }
app.component.html
<h1> GeeksforGeeks </h1> <p>Locale Date is : {{curr}}</p>
Producción:
Referencia: https://angular.io/api/common/formatDate