Geekflare cuenta con el apoyo de nuestra audiencia. Podemos ganar comisiones de afiliados comprando enlaces en este sitio.
Comparte en:

Trabajar con fechas usando date-fns en JavaScript

javascript
Escáner de seguridad de aplicaciones web Invicti – la única solución que ofrece verificación automática de vulnerabilidades con Proof-Based Scanning™.

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 nos hace la vida más fácil que antes. El paquete date-fns es ligero.

La instalación del 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 tienes NodeJS instalado or IDE para practicar esto.

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

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

isValid

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 del desplegable date-fns el paquete nos ayudará a encontrar si la fecha indicada 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á 30th February 2021 es válido. ¡Oh! No es.

¿Por qué está sucediendo?

JavaScript convierte el día extra de febrero en 1st March 2021 que es una fecha válida. Para confirmarlo, imprima new Date("2021, 02, 30") a 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 ha proporcionado 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));

format

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

Formatee la fecha como 23-01-1993, 1993-01-23 10:43:55, Tuesday, January 23rd 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"));

Puedes encontrar la lista completa de formatos aquí.

addDays

El método addDays se utiliza para establecer una fecha límite posterior a algunos 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 hacer uso de la addDays método para notificarle sobre el cumpleaños después de X días. Tenga 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"));

Similar al método addDays hay 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.

formatDistance

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

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

El método formatDistance hace lo mismo. Devuelve el intervalo 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)}`);

eachDayOfInterval

Digamos que tienes que buscar 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 la de finalización.

Averigüemos dentro de 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"));
});

max and min

Los métodos max y min encuentra las fechas máxima y mínima entre las fechas dadas respectivamente. Los métodos en el date-fns son muy familiares y fáciles de adivinar la funcionalidad de esos métodos. Escribamos un 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])}`);

isEqual

Puedes adivinar fácilmente la funcionalidad del método. isEqual. Como piensas el método isEqual se utiliza para comprobar si dos fechas son iguales o no. Vea el código de muestra 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 del date-fns paquete, entonces toma días para completar. 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. Aplicar el mismo escenario para el date-fns paquete 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 👨‍💻

Gracias a nuestros patrocinadores
Más lecturas interesantes sobre el desarrollo
Impulse su negocio
Algunas de las herramientas y servicios para ayudar a que su negocio crezca.
  • Invicti utiliza Proof-Based Scanning™ para verificar automáticamente las vulnerabilidades identificadas y generar resultados procesables en cuestión de horas.
    Prueba Invicti
  • Web scraping, proxy residencial, administrador de proxy, desbloqueador web, rastreador de motores de búsqueda y todo lo que necesita para recopilar datos web.
    Prueba Brightdata
  • Semrush es una solución de marketing digital todo en uno con más de 50 herramientas en SEO, redes sociales y marketing de contenido.
    Prueba Semrush
  • Intruder es un escáner de vulnerabilidades en línea que encuentra debilidades de ciberseguridad en su infraestructura, para evitar costosas filtraciones de datos.
    Intente Intruder