Formato de fecha en Angular

1. Date Pipe en Angular
2. Ejemplos de Date Pipe en Angular
3. Lista de formatos de fecha predefinidos en Angular

Introduciremos cómo usar, cambiar o añadir elementos y mostrar fechas de una timezone en formato de fecha usando DatePipe en Angular.

Date Pipe en Angular

La tubería de fecha Angular se usa para formatear fechas en Angular de acuerdo con el formato de fecha proporcionado, la zona horaria y la información de configuración regional del país.

Usando el DatePipe, podemos convertir fácilmente un objeto de fecha, un número o una cadena de fecha ISO de acuerdo con formatos de fecha Angular predefinidos o formatos de fecha Angular personalizados.

Angular DatePipe acepta tres parámetros: format, timezone, y locale.

format

Podemos pasar formatos de fecha predefinidos o formatos de fecha personalizados en parámetros de formato.

timezone

En el parámetro timezone, la zona horaria por defecto es la zona horaria del sistema local de la máquina del usuario. Podemos cambiar la zona horaria pasando la zona horaria offset (‘0510’) o la abreviatura de zona horaria estándar UTC/GMT (CET) o la zona horaria continental de Estados Unidos, y es un parámetro opcional.

locale

locale representa las reglas de formato de configuración regional a utilizar. El valor predeterminado de la configuración regional es la configuración regional de nuestro proyecto (en_US) si está establecida o no definida. Locale es un parámetro opcional.

Ejemplos de Date Pipe en Angular

Discutiremos algunos ejemplos con diferentes formatos de fecha para comprender mejor Angular DatePipe.

En primer lugar, añadiremos este código en nuestro app.component.ts.

#angular

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  today: Date = new Date();
  pipe = new DatePipe('en-US');
  todayWithPipe = null;
  ngOnInit(): void {
    this.todayWithPipe = this.pipe.transform(Date.now(), 'dd/MM/yyyy');
  }
}

Importamos DatePipe de @angular/common en el código anterior. Hemos exportado una clase AppComponent implementada en Initial, dentro de la cual hemos creado un nuevo DatePipe con la configuración regional en-US.

Agregaremos código a app.component.html para mostrar la fecha con nuestro formato de fecha predefinido dd/MM/yyyy.

<div>Today Date is: {{ todayWithPipe }}</div>

Producción:

Lista de formatos de fecha predefinidos en Angular

Angular DatePipe tiene 12 formatos predefinidos, como se muestra en la tabla anterior. Pero también podemos crear nuestros formatos de fecha personalizados e incluir algunos elementos más como Era, Semana del año, Semana del mes, Día del mes, etc.