Formatear fecha usando Pipe en Angular

1. ¿Cómo se usa el Date Pipe de Angular?
2. Ejemplo de zona horaria usando una tubería de fecha angular
3. Ejemplo de una tubería de fecha angular con una ubicación de país
4. Cree una tubería de fecha personalizada en Angular:

Angular Date Pipe nos permite formatear fechas en Angular usando el formato especificado, la zona horaria y los detalles específicos. Tiene formatos predefinidos y cadenas de formato personalizado. En las cadenas de formato personalizado, podemos personalizar fácilmente el formato de fecha, la zona horaria, la configuración regional del país, etc. con la ayuda de algunos pasos esenciales, discutiremos todos estos pasos en detalle. Este artículo aclarará todas sus dudas y demostrará el formato de fecha usando Pipe en Angular con la ayuda de ejemplos. Vamos a empezar.

¿Cómo se usa el Date Pipe de Angular?

El componente @angular/common presenta el Date Pipe. Las tuberías se pueden usar para formatear datos en Angular, incluidos valores, porcentajes, fechas y mucho más. Principalmente, se consideran tres parámetros al diseñar un tubo de fecha angular.

• Format
• Time zone
• Locale

Antes de analizar los parámetros mencionados anteriormente, es esencial conocer la sintaxis de la canalización de fecha angular utilizando el formato, la zona horaria y la configuración regional.

{{ date_Value | date [ : format [ : timeZone [ : locale ] ] ] }}

Parámetros y descripción de Angular Date Pipe

Format: como parámetro de formato, podemos proporcionar formatos de fecha angular estándar o formato de fecha personalizado. mediumDate es el valor predeterminado.

Time zone: La zona horaria estándar es la zona horaria del sistema local de la máquina del usuario. Podemos proporcionar el desplazamiento de la zona horaria (0530), UTC/GMT convencional (IST) o el acrónimo de la zona horaria del este de EE. UU. como un parámetro adicional para ajustar la zona horaria.

Locale: Indica las reglas de formato de locale que se deben utilizar. Si no está definido o configurado, el valor predeterminado es la configuración regional de nuestro proyecto (en-US).

Además, debe saber que Angular viene con solo los datos de configuración regional en-US listos para usar. Debe importar datos de configuración regional relevantes para localizar las fechas en cualquier idioma.

Lista de todos los formatos de fecha predefinidos en Angular

La tubería de fecha angular tiene 12 formatos predefinidos. Analicemos la lista de todos estos formatos de fecha incorporados en detalle.

• short: M/d/yy, h:mm a, 1/01/22, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'short'}}
• medium: MMM d, y, h:mm:ss a, Jan 01, 2022, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'medium'}}
• long: MMMM d, y, h:mm:ss a z, Jan 01, 2022 at 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'long'}}
• longDate: MMMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'longDate'}}
• fullDate: EEEE, MMMM d, y, Saturday, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'fullDate'}}
• shortTime: h:mm a, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'shortTime'}}
• mediumTime: h:mm:ss a, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'mediumTime'}}
• longTime: h:mm:ss a z, 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'longTime'}}
• fullTime: h:mm:ss a zzzz, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'fullTime'}}
• full: EEEE, MMMM d, y, h:mm:ss a zzzz, Saturday, Jan 01, 2021 at 11:45:13 PM GMT+05:30. Its Angular datepipe code is {{todayDate | date:'full'}}
• shortDate: M/d/yy, 1/01/22. Its Angular datepipe code is {{todayDate | date:'shortDate'}}
• mediumDate: MMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'mediumDate'}}

Haga clic aquí para verificar el formato de fecha y hora para obtener más aclaraciones.

Ejemplo de zona horaria usando una tubería de fecha angular

Podemos dar la zona horaria como parámetro a la tubería de fecha y el formato de fecha para mostrar la fecha en un UTC específico. La desviación de zona horaria (‘0530’), UTC/GMT convencional (IST) o el acrónimo de zona horaria de EE. UU. continental son todas opciones para el parámetro de zona horaria.
Por ejemplo, para mostrar la hora en la zona horaria IST.

Today is {{todayDate | date:'short':'IST'}}

Today is {{todayDate | date:'short':'+05:00'}} 

Producción :

Today is 1/02/19, 3:30 PM 

Ejemplo de una tubería de fecha angular con una ubicación de país

Es necesario proporcionar el código de configuración regional del país como tercer argumento a la tubería de fecha angular para mostrar la fecha de acuerdo con los estándares de formato de configuración regional del país, como se ve a continuación.

Alemania, por ejemplo, utiliza la Hora estándar alemana y tiene un desplazamiento de zona horaria de +01:00. Utilice el código de configuración regional de como parámetro en Angular para mostrar la fecha y la hora en la configuración regional de Alemania, como se muestra a continuación.

<p>The current German date time is  {{todayDate | date:'full':'+01:00':'de'}}</p>

Producción :

The current German date time is Mittwoch, 5. Januar 2022 um 12:50:38 GMT+01:00

Cree una tubería de fecha personalizada en Angular:

Angular usa el formato de fecha mediumDate por defecto. ¿Qué pasa si deseamos modificarlo y usar nuestro propio formato único en lugar de formatos incorporados, como MMM d, y, h:mm: ss a?

Esto muestra la hora como January 01, 2022, 11:45:13 PM.

Mostraremos muchas fechas en nuestras aplicaciones Angular, y necesitaremos pasar el argumento de formato cada vez. Como se ve a continuación, podemos crear nuestra tubería de fecha personalizada y usarla en toda la aplicación para evitar esto.

{{ todayDate | customDate }}

Producción :

January 01, 2022, 11:45:13 PM

Siga las instrucciones a continuación para hacer un tubo de fecha personalizado. Agregue el siguiente código a un archivo denominado custom.datepipe.ts.

import { Pipe, PipeTransform } from '@angular/core';

  import { DatePipe } from '@angular/common';  

  @Pipe({

   name: 'customDate'

  })

  export class CustomDatePipe extends 

 DatePipe implements PipeTransform {

   transform(value: any, args?: any): any {
 return super.transform(value, " MMM d, y, h:mm:ss a ");   } }

Después de hacer esto, el siguiente paso es importar CustomDatePipe y agregarlo al array de declaración de AppModule.

 import {CustomDatePipe} from './custom.datepipe';
   @NgModule({
    declarations: [
    CustomDatePipe
   ]);

Ahora, estamos en la etapa en la que podemos utilizar nuestra tubería de fecha personalizada en el archivo del componente.

{{todayDate | customDate}}

Producción :

Jan 5, 2022, 5:25:36 PM

Formatos de fecha personalizados:

En Angular, puede crear sus propios formatos de fecha. La siguiente es una lista completa de todos los formatos de fecha personalizados posibles.

Ejemplo de formato personalizado:

Aquí, mencionamos un ejemplo muy simple de un formato personalizado.

{{todayDate | date:'dd/MM/yy HH:mm'}}     

Producción :

05/01/22 17:25

Si desea obtener más información sobre la tubería de fecha angular, haga clic aquí