Trabajando con Fechas Usando date-fns en JavaScript

por

Trabajar con fechas no es una tarea fácil. Pero el paquete date-fns facilita el trabajo con las fechas en JavaScript.

Profundicemos en el paquete date-fns para hacernos la vida más fácil que antes. El paquete date-fns es ligero.

Instalando el paquete

Necesitamos configurar el proyecto con npm para que funcione con un paquete de terceros. Veamos rápidamente los pasos para completar nuestra configuración.

Supongo que tiene instalado NodeJS o IDE para practicar esto.

  • Navegue hasta el directorio deseado en el que desea trabajar.
  • Ejecute el comando npm init para inicializar el proyecto.
  • Responda todas las preguntas según su preferencia.
  • Ahora, instale date-fns usando el siguiente comando
npm install date-fns
  • Cree un archivo llamado dateFunctions.js

Ahora, estamos listos para saltar al paquete date-fns. Vayamos y aprendamos algunos métodos esenciales del paquete.

es válida

Todas las fechas no son válidas.

Por ejemplo, no hay una fecha como 2021-02-30. ¿Cómo podemos comprobar si la fecha es válida o no?

El método isValid from the date-fns el paquete nos ayudará a encontrar si la fecha dada es válida o no.

Examine si el siguiente código funciona bien o no con la validez de las fechas.

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

Si ejecuta el código anterior, encontrará que el 30 de febrero de 2021 es válido. ¡Vaya! No es.

¿Por qué está sucediendo?

JavaScript convierte el día adicional de febrero al 1 de marzo de 2021, que es una fecha válida. Para confirmarlo, imprima una nueva Fecha («2021, 02, 30») en la consola.

console.log(new Date("2021, 02, 30"));

El paquete date-fns proporciona un método llamado parse para solucionar este problema. El método parse analiza la fecha que proporcionó y devuelve resultados precisos.

Eche un vistazo al siguiente código.

const { isValid, parse } = require("date-fns");

const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());

console.log(isValid(invalidDate));
console.log(isValid(validDate));

formato

Uno de los usos básicos al trabajar con fechas es formatearlas como queremos. Formateamos las fechas en diferentes formatos utilizando el método de formato del paquete date-fns.

Formatee la fecha como 23-01-1993, 1993-01-23 10:43:55, martes, 23 de enero de 1993, etc. Ejecute el siguiente código para obtener la fecha correspondiente en los formatos mencionados.

const { format } = require("date-fns");

console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));

Puede encontrar la lista completa de formatos aquí.

añadirdías

El método addDays se usa para establecer una fecha límite después de una cierta cantidad de días.

Simplemente, podemos agregar días a cualquier fecha para obtener la fecha del día después de algunos días. Tiene muchas aplicaciones.

Digamos que tienes un cumpleaños después de X días y estás ocupado esos días. Es posible que no recuerde el cumpleaños en su apretada agenda. Simplemente puede utilizar el método addDays para notificarle sobre el cumpleaños después de X días. Tener el código.

const { format, addDays } = require("date-fns");

const today = new Date();

// birthday after 6 days
const birthday = addDays(today, 6);

console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));

Al igual que el método addDays, existen otros métodos como addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, etc. Puede adivinar fácilmente la funcionalidad de los métodos con sus nombres.

Pruébalos.

formatoDistancia

Escribir código para comparar fechas desde cero es una pesadilla. ¿Por qué comparamos fechas de todos modos?

Hay muchas aplicaciones en las que has visto comparaciones de fechas. Si toma sitios web de redes sociales, habrá un eslogan que mencione hace 1 minuto, hace 12 horas, hace 1 día, etc. Aquí, usamos la comparación de fechas desde la fecha y hora de publicación hasta la fecha y hora actual.

El método formatDistance hace lo mismo. Devuelve la brecha entre las dos fechas dadas.

Escribamos un programa para encontrar tu edad.

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`Age: ${formatDistance(presentDay, birthday)}`);

cadaDíaDeIntervalo

Digamos que tienes que encontrar los nombres y fechas de los próximos X días. El método eachDayOfInterval nos ayuda a encontrar los días entre la fecha de inicio y finalización.

Averigüemos los próximos 30 días a partir de hoy.

const { addDays, eachDayOfInterval, format } = require("date-fns");

const presentDay = new Date();
const after30Days = addDays(presentDay, 30);

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

_30Days.forEach((day) => {
   console.log(format(day, "PPPP"));
});

máximo y mínimo

Los métodos max y min encuentran las fechas máxima y mínima entre las fechas dadas respectivamente. Los métodos en date-fns son muy familiares y fáciles de adivinar la funcionalidad de esos métodos. Escribamos algo de código.

const { min, max } = require("date-fns");

const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");

console.log(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);

es igual

Puede adivinar fácilmente la funcionalidad del método isEqual. Como cree, el método isEqual se usa para verificar si dos fechas son iguales o no. Vea el código de ejemplo a continuación.

const { isEqual } = require("date-fns");

const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");

console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));

Conclusión

Si hablamos de todos los métodos en el paquete date-fns, se tarda días en completarse. La mejor manera de aprender cualquier paquete es familiarizarse con los métodos esenciales del mismo y luego leer la documentación para obtener más información. Aplique el mismo escenario para el paquete date-fns también.

Ha aprendido los métodos esenciales en este tutorial. Busque el uso específico en el documentación o considere tomar cursos en línea como JavaScript, jQuery y JSON.

Codificación feliz 👨‍💻

No related posts.