Formateo de fechas con pipes en Angular
Con el pipe DatePipe podemos
establecer un formato específico para la fecha mostrada.
Este pipe puede aceptar los siguientes
parámetros para el formato de visualización de fecha:
| Formato | Equivalente | Ejemplo (para localidad en-US) |
|---|---|---|
'short' |
'M/d/yy, h:mm a' |
12/31/25, 3:00 AM |
'medium' |
'MMM d, y, h:mm:ss a' |
Dec 31, 2025, 3:00:00 AM |
'long' |
'MMMM d, y, h:mm:ss a z' |
December 31, 2025 at 3:00:00 AM GMT+3 |
'full' |
'EEEE, MMMM d, y, h:mm:ss a zzzz' |
Wednesday, December 31, 2025 at 3:00:00 AM GMT+03:00 |
'shortDate' |
'M/d/yy' |
12/31/25 |
'mediumDate' |
'MMM d, y' |
Dec 31, 2025 |
'longDate' |
'MMMM d, y' |
December 31, 2025 |
'fullDate' |
'EEEE, MMMM d, y' |
Wednesday, December 31, 2025 |
'shortTime' |
'h:mm a' |
3:00 AM |
'mediumTime' |
'h:mm:ss a' |
3:00:00 AM |
'longTime' |
'h:mm:ss a z' |
3:00:00 AM GMT+3 |
'fullTime' |
'h:mm:ss a zzzz' |
3:00:00 AM GMT+03:00 |
Ejemplos
Veamos el funcionamiento del pipe con ejemplos.
Para ello, en la clase del componente definamos
una propiedad myDate, en la que escribiremos
una fecha:
export class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
Ejemplo
Mostremos nuestra fecha sin pasar ningún parámetro al pipe:
<div>
{{ myDate | date }}
</div>
Resultado del código ejecutado:
<div>Dec 31, 2025</div>
Ejemplo
Ahora mostremos la fecha en formato corto:
<div>
{{ myDate | date:'shortDate' }}
</div>
Resultado del código ejecutado:
<div>12/31/25</div>
Ejemplo
Mostremos nuestra fecha y de paso averigüemos qué día de la semana era:
<div>
{{ myDate | date:'fullDate' }}
</div>
Resultado del código ejecutado:
<div>Wednesday, December 31, 2025</div>
Problemas prácticos
Fecha dada:
public myDate: number = Date.parse('2025-01-02');
Formatee la fecha de la siguiente manera:
'Jan 2, 2025'
Formatee la fecha del ejercicio anterior de la siguiente manera:
'1/2/25, 3:00 AM'
Formatee la fecha de la siguiente manera:
'1/2/25'
Formatee la fecha de la siguiente manera:
'January 2, 2025 at 3:00:00 AM GMT+3'
Formatee la fecha de la siguiente manera:
'Thursday, January 2, 2025'
