Manipulación de Fechas en Angular con Date Functions

Clase 54 de 71 • Curso de Angular: Creación de Aplicaciones Web

Resumen

¿Cómo integrar librerías en un proyecto Angular para manejar fechas?

Uno de los desafíos más comunes al programar en JavaScript es la manipulación y manejo de fechas. Sin embargo, existen librerías que pueden facilitarnos esta tarea, integrándolas en nuestros proyectos de Angular. A continuación, te explicamos cómo utilizar date-fns, una poderosa herramienta de JavaScript, para calcular distancias entre fechas de forma eficaz.

¿Cómo instalar y utilizar Date Functions?

Para integrarte al ecosistema de JavaScript desde Angular, es crucial contar con herramientas efectivas. Aquí es donde entra en juego date-fns, una librería que simplifica la utilización de fechas. Sigue estos pasos para instalarla y aplicarla en tu proyecto:

Instalación de la librería: Ejecuta el siguiente comando en tu terminal para agregar date-fns a tu proyecto:
```
npm install date-fns
```
Esta acción integra las funcionalidades de manejo de fechas al entorno de Angular.
Uso de la función Format Distance: Tras la instalación, puedes utilizar el pipe time ago para calcular el tiempo transcurrido desde una fecha específica hasta el presente:
```
import { formatDistance } from 'date-fns';

transform(value: string): string {
    const date = new Date(value);
    return formatDistance(date, new Date());
}
```
Aquí, formatDistance devuelve una cadena que describe el tiempo transcurrido entre las dos fechas, como "hace unas semanas" o "hace tres meses".

¿Cómo implementar Time Ago en HTML?

Una vez configurado el pipe en Angular, es hora de utilizarlo en tu componente HTML. Este enfoque reemplaza el uso de los pipes de Angular y te da control sobre cómo se muestran las fechas:

Borra elementos HTML innecesarios: Reajusta tu HTML eliminando elementos que no aporten al nuevo pipe, enfocándote en agregar el pipe de time ago.
Implementación del pipe Time Ago: En el HTML, utiliza el pipe creado para mostrar las fechas:
```
<div>{{ product.creationDate | timeAgo }}</div>
```
Esta línea permite visualizar la diferencia entre la fecha de creación de un producto y la fecha actual directamente en la interfaz de usuario.

¿Cuáles son los beneficios de utilizar Date Functions?

El uso de date-fns no solo facilita el manejo de fechas, sino que también ofrece varias ventajas para tu proyecto en Angular:

Precisión y simplicidad: Calcula distancias entre fechas de manera precisa y sencilla.
Flexibilidad: Puedes integrarlo en múltiples proyectos y sistemas que requieran características de manejo de fechas.
Optimización del ecosistema de JavaScript: Aprovechas al máximo las herramientas útiles del ecosistema de JavaScript dentro de Angular.

Empleando date-fns, puedes mejorar significativamente la gestión de fechas en tus proyectos, sin importar su envergadura. Además, sigue explorando otras librerías que pueden integrarse fácilmente en tu entorno de Angular para optimizar tus aplicaciones. ¿Listo para llevar tus habilidades de programación al siguiente nivel? ¡Sigue practicando y explorando nuevas herramientas constantemente!

Facundo Blanco

student•

La librería de date functions tiene también una función que mide la distancia desde una fecha hasta ahora por si sola sin necesidad de hacer un new Date(), por lo que en mi pipe lo use de esta manera:

return formatDistanceToNow(new Date(value), { addSuffix: true });

Elcira Ibarra

student•

Genial, muy bueno, añade el 'ago' (5 days ago) o 'in' (in 12 months).

Elcira Ibarra

student•

También se puede agregar el locale para cambiar el idioma.

import { es, ptBR } from 'date-fns/locale';

transform(value: string): string {
	return formatDistanceToNow(
		new Date('2028-08-20T12:00:00'), { 
		addSuffix: true, 
		locale: ptBR 
		})
}

Agustin Cammarota Muti

student•

Se los dejo en el viejo y confiable JS. Es recomendable no usar librerías en caso muy necesarios, ya que estas impactan directamente en el bundle de la aplicación y, por ende, en el peso de la app / performance.

transform(``value``: Date): string { const ``currentDateDay ``= new ``Date``().getDate(); const ``lastUpdateDay ``= new ``Date``(``value``).getDate();

const ``currentMinutes ``= new ``Date``().getMinutes(); const ``lastUpdateMinutes ``= new ``Date``(``value``).getMinutes();

const ``daysUpdate ``= ``currentDateDay ``- ``lastUpdateDay``; let ``minutesUpdate ``= null;

if (``daysUpdate ``=== 0) { ``minutesUpdate ``= ``currentMinutes ``- ``lastUpdateMinutes``; } return ``minutesUpdate ```?${minutesUpdate} minutos:${daysUpdate} dias;`` }`

Andres David Caicedo Marquez

student•

A ti te estaba buscando, muchas gracias.

Adrián Marín

student•

Si de casualidad quereis hacerlo mediante html, hay una opción en el mismpo pipe date.

Martín Alfredo Yela

student•

En angular 17, si pones en el main.ts el siguiente código, se muestra en español:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
import { LOCALE_ID } from '@angular/core';

registerLocaleData(localeEs);

bootstrapApplication(AppComponent, {
  ...appConfig,
  providers: [
    ...(appConfig.providers || []),
    { provide: LOCALE_ID, useValue: 'es-ES' },
  ],
}).catch((err) => console.error(err));

gianfranco flores pacheco

student•

¿A QUE SE DEBE EL ERROR? ............................................... Error: Schema validation failed with the following errors: Data path "" must have required property 'browserTarget'. /home/gianfranco/Escritorio/RutaPLatziJavascript/Angular/store/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13 throw err; ^

SchemaValidationException [Error]: Schema validation failed with the following errors: Data path "" must have required property 'browserTarget'. at /home/gianfranco/Escritorio/RutaPLatziJavascript/Angular/store/node_modules/@angular-devkit/architect/src/architect.js:40:27 { errors: [ { instancePath: '', schemaPath: '#/required', keyword: 'required', params: { missingProperty: 'browserTarget' }, message: "must have required property 'browserTarget'" } ] }

Node.js v20.10.0

Platzi

student•

El error se debe a que falta la propiedad 'browserTarget' en el archivo de configuración del proyecto.

Peter Javier Carvajal Pacheco

student•

Se puede concatenar los strings "added" y "ago" para que quede más completo.

return "added " + formatDistance(new Date(), new Date(value)) + " ago.";

Victor Hugo Vázquez Gómez

student•

Yo use dayjs 🤓👆 Y quedo asi:

import { Pipe, PipeTransform } from '@angular/core';
import dayjs from 'dayjs';
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);

@Pipe({
  name: 'timeAgo',
  standalone: true
})
export class TimeAgoPipe implements PipeTransform {

  transform(value: string): string {
    return dayjs(value).fromNow();
  }

}

ANDRES ALFONSO MIRA MEJIA

student•

✅