Manejo de fechas en JavaScript con Tempo

La manipulación de fecha y hora es una característica esencial de JavaScript. Los desarrolladores de JavaScript utilizan el constructor integrado Datepara crear objetos de fecha. Estos objetos les permiten realizar operaciones de fecha y hora en JavaScript y crear funcionalidades relacionadas para sus aplicaciones.

El siguiente ejemplo de código crea un Dateobjeto. Este objeto tiene varios métodos, como getFullYear()y setMonth(), que los desarrolladores pueden usar para manipular fechas en el lenguaje:

const tiempo = nueva Fecha();console.log(tiempo.getFullYear());// 2024

Sin embargo, JavaScript codifica las fechas fundamentalmente como el número de milisegundos desde la época Unix (medianoche del 1 de enero de 1970), sin ninguna zona horaria adjunta.

Debido a la simplicidad del funcionamiento de las fechas en JavaScript ( junto con otras peculiaridades ), puede resultar complicado usar fechas nativas de JavaScript para crear aplicaciones que deben tener en cuenta las diferencias de zona horaria, las diferencias geográficas en el formato de fecha y el horario de verano (DST). Para solucionar algunos de estos problemas, bibliotecas como Moment.js se convirtieron en el estándar para cualquier trabajo complejo con fechas.

Hoy en día, existen numerosas bibliotecas de JavaScript para gestionar fechas, y cada una tiene sus propias ventajas y desventajas. En este artículo, aprenderemos más sobre la biblioteca Tempo . Según su documentación, es posiblemente la forma más sencilla de trabajar con fechas en JavaScript.

Tempo destaca por ofrecer un formato de fecha correcto para cualquier configuración regional, análisis de cadenas de fecha (en cualquier formato) para objetos de fecha, y una API sencilla. Además, no necesita complementos adicionales para funcionar completamente.

Para seguir esta guía, necesitarás conocimientos básicos sobre cómo trabajar con fechas en JavaScript. Al finalizar, comprenderás las capacidades de Tempo y por qué podría ser mejor que otras bibliotecas de manipulación de fechas. ¡Comencemos!

¿Qué es Tempo?

Tempo es una biblioteca de fechas TypeScript/JavaScript que se utiliza para formatear, analizar y modificar fechas y horas. Su creador, Justin Schroeder (quien también creó FormKit), necesitaba una solución para los problemas de zona horaria y formato de las fechas en JavaScript. Ninguna otra biblioteca podía resolver estos problemas de la forma que él consideraba adecuada, por lo que creó Tempo, que se lanzó en febrero de 2024.

Internamente, Tempo utiliza el Intl.DateTimeFormatconstructor de JavaScript para gestionar zonas horarias y presentar formatos de fecha que tengan en cuenta la configuración regional. También funciona con el Dateconstructor en JavaScript. Tempo no crea sus propios objetos de fecha personalizados como otras bibliotecas. Al utilizar las utilidades de JavaScript existentes, el tamaño de la biblioteca es considerablemente reducido.

Características del tempo

Tempo ofrece numerosas ventajas, como un excelente manejo de las diferencias horarias, análisis bidireccional de fechas (desde cadenas de fecha en cualquier formato hasta objetos de fecha), la ausencia de complementos adicionales, una API fácil de usar, buena documentación y mucho más. FormKit utiliza Tempo para implementar su datepickerfuncionalidad de entrada.

Utiliza objetos nativos de JavaScript: Como mencionamos anteriormente, Tempo proporciona funciones para trabajar con el Dateobjeto nativo. También utiliza el Intl.DateTimeFormatconstructor para extraer datos de zona horaria y formatos de fecha que tienen en cuenta la configuración regional.

Un sacudidor de árboles altamente adaptable: El tree shaker se refiere a la eliminación de código inactivo, es decir, código que no afecta al programa. En JavaScript, el tree shaker utiliza sentencias importy exportpara determinar qué módulos se utilizan en los archivos JavaScript. Con Tempo, el código de producción solo incluye las funciones importadas, lo que mejora el rendimiento.

Técnicas de análisis versátiles: Como se mencionó anteriormente, Tempo convierte fácilmente cadenas de fecha de cualquier formato en un objeto de fecha. El formato predeterminado para el análisis es ISO 8601, pero especifique los demás formatos antes del análisis también funciona muy bien. El análisis desde cualquier formato de fecha es una función de la que carecen la mayoría de las bibliotecas de fechas.

Modificación de fecha: Tempo cuenta con numerosas funciones para modificar fechas. Puedes añadir fácilmente un día, un mes o un año a una fecha específica. La biblioteca también calcula fácilmente la fecha y la hora en otra zona horaria.

Funciones auxiliares: Tempo ofrece un par de funciones que facilitan la gestión de fechas, incluyendo sameMinute(), sameHour(), isBefore(), isAfter()y isEqual(). Estas funciones aceptan una cadena ISO 8601 o un Dateobjeto y devuelven un valor booleano.

Cómo instalar Tempo

Para instalar Tempo, solo necesitas un entorno de ejecución de JavaScript y un gestor de paquetes. El código a continuación muestra cómo instalarlo con npm, pero se aplica un método similar para Yarn o pnpm:

npm instalar @formkit/tempo

Cómo formatear fechas con Tempo

Una función útil que Tempo exporta es format, que convierte un objeto de fecha de JavaScript o una cadena ISO 8601 en una cadena con formato de fecha. De forma predeterminada, la función genera cadenas de fecha en la configuración regional del usuario, pero también puede mostrar fechas en otras configuraciones regionales si se especifican.

Con esta formatfunción, puede establecer un estilo de visualización de fecha, es decir, full, short, long:

importar { formato } desde '@formkit/tempo'fecha constante = nueva Fecha()formato(fecha, 'completo')// Viernes 15 de marzo de 2024formato(fecha, 'completo', 'fr')// Viernes 15 de marzo de 2024

Tempo también usa tokens de formato, similar a la biblioteca Day.js, para mostrar fechas:

importar { formato } desde '@formkit/tempo'tiempo constante = nueva fecha()formato(hora, 'dddd, MMMM D, AAAA h:mm:ss a', 'it')// venerdì, 15 de marzo de 2024 12:04:21 pmformato(hora, 'h:mm:ss A', 'en')// 12:04:21 PM

Así es como puedes formatear fechas y horas según una zona horaria específica:

importar { formato } desde '@formkit/tempo'formato({ fecha: nueva Fecha(), formato: 'HH:mm A', tz: 'África/Lagos'})// 12:08 pm

Cómo realizar operaciones de fechas con Tempo

Hay varias maneras de modificar fechas con Tempo. Puede agregar y quitar segundos, minutos, horas, días, semanas, meses y años usando las funciones proporcionadas. Estas funciones aceptan una cadena ISO 8601 o un Dateobjeto, y devuelven un nuevo Dateobjeto:

importar { addDay, addMonth } desde '@formkit/tempo'constante fecha_prueba = '2020-11-20'//Añadir 1 mesaddMonth(fechaDePrueba)// Añadir 3 mesesaddMonth(fechaPrueba, 3)// Restar 5 díasaddDay(fechaPrueba, -5)

También puede aplicar una zona horaria a una fecha para modificarla. Primero, obtenga la diferencia horaria de una zona horaria específica con respecto a la fecha que desea modificar y, a continuación, modifique la fecha con la zona horaria obtenida para obtener un nuevo Dateobjeto:

importar { offset, applyOffset, removeOffset } desde '@formkit/tempo'tiempo de prueba constante = '2020-11-20 03:00'const londonOffset = offset(testTime, 'Europa/Londres')// Aplicar un desfase horarioaplicarOffset(testTime, londonOffset)// Eliminar una diferencia de zona horariaremoveOffset(testTime, LondonOffset)

Por último, Tempo proporciona la función tzDateque convierte una cadena similar a ISO 8601 en un Dateobjeto con una zona horaria aplicada:

importar { tzDate } desde '@formkit/time'tzDate('2020-11-20 03:00', 'África/Lagos')

Encontrar la diferencia entre dos fechas

Una tarea que puedes realizar con Tempo es encontrar la diferencia entre dos fechas (u horas). Tempo registra la información de la zona horaria al calcular la diferencia entre dos fechas.

Como Tempo utiliza el Dateobjeto nativo, es fácil restar fechas entre sí como se haría con JavaScript normal:

importar { tzDate } desde '@formkit/tempo'const currentTime = tzDate(new Date(), 'África/Lagos')const lastChristmas = tzDate('2023-12-25', 'América/Nueva_York')función diferenciahoraria(fechaA, fechaB) {    const milisegundosDiff = Math.abs(fechaA - fechaB)    constante daysDiff = Math.floor(milisegundosDiff / (1000 * 60 * 60 * 24))   devuelve `${daysDiff} días`}diferenciaDeTiempo(HoraActual, ÚltimaNavidad)// 82 días

Con este método, podemos calcular la cantidad de minutos, segundos, semanas, etc., entre dos puntos en el tiempo. La función obtiene los dos objetos de fecha, calcula sus diferencias y las muestra, teniendo en cuenta las diferencias de horario de verano y zona horaria.

Internacionalización de fechas (i18n) con Tempo

La internacionalización es la capacidad de un programa para presentar información en diferentes idiomas y ubicaciones. Se abrevia como i18n (18 es el número de letras entre la «i» y la «n»). Tempo destaca por sus excelentes capacidades i18n; de hecho, es una de las principales fortalezas de la biblioteca.

En Tempo, se pueden mostrar fechas en cualquier configuración regional mediante la formatfunción que exploramos anteriormente. Tempo también puede mostrar la fecha y la hora en cualquier idioma, lo cual hace mediante el Intl.DateTimeFormatconstructor de JavaScript. La API para todo esto se encuentra en la documentación de Tempo .

Tempo vs. Day.js

Day.js es una alternativa ligera a Moment.js, la biblioteca de gestión de fecha y hora, ahora obsoleta. Está escrita en JavaScript y utiliza una API similar a la de Moment.js. Day.js es suficiente para operaciones de fecha como análisis, manipulación y visualización. Está diseñada para usarse tanto en el navegador como en el entorno de ejecución de Node.js.

Day.js es la biblioteca de fechas más popular en JavaScript. Actualmente, cuenta con más de 45000 estrellas en GitHub y 19,7 millones de descargas semanales en npm, a diferencia de Tempo, que es más reciente y cuenta con 1800 estrellas en GitHub y aproximadamente 8000 descargas en npm.

Para trabajar con fechas en Day.js, necesitará crear un objeto Day.js. No funciona con el objeto de fecha nativo de JavaScript como Tempo. Por ejemplo, aquí se explica cómo crear un objeto con la fecha y hora actuales en Day.js:

constante ahora = dayjs()

La sintaxis de Day.js se basa principalmente en el encadenamiento de métodos, un estilo que el autor de Tempo evitó activamente al crear la biblioteca, ya que puede ser problemático para el tree shaker y no ofrece ninguna ventaja específica. A continuación, se muestra un ejemplo de este comportamiento de encadenamiento en Day.js:

dayjs('2024-03-18').add(3, 'mes').subtract(2, 'año').toString()

A pesar de esto, Day.js ofrece algunos métodos adicionales para la personalización de fechas que Tempo y contiene muchas funciones auxiliares útiles. La desventaja de Day.js es que requiere complementos para estas funciones extendidas. Trabajar con zonas horarias también requiere complementos. Estas funcionalidades no vienen con la biblioteca por defecto.

Tiempo vs. cierre de funciones

Date-fns es una biblioteca de gestión de fechas en JavaScript escrita en TypeScript. Se lanzó por primera vez en 2014. Funciona tanto en el navegador como en Node.js. También es compatible con TypeScript y Flow (el verificador de tipos de JavaScript). Date-fns es muy popular, con 33400 estrellas en GitHub y 20,5 millones de descargas semanales de npm, al momento de escribir este artículo.

date-fns tiene un tamaño de paquete de 17,2 KB cuando está minimizado y comprimido, a diferencia de Tempo, que es de 5,5 KB. date-fns admite tree shaker, lo que significa que uno simplemente elige los módulos que quiere y solo esos módulos se agregan a la compilación de producción.

date-fns funciona con el Dateobjeto nativo de JavaScript; no incluye su propio objeto de fecha como Day.js. En este sentido, es similar a Tempo. Sin embargo, trabajar con zonas horarias y horario de verano en date-fns requiere una biblioteca adicional: date-fns-tz, que no incluye compatibilidad con zonas horarias por defecto. La biblioteca date-fns-tz utiliza la IntlAPI de JavaScript para trabajar con zonas horarias, que también es similar a Tempo.

date-fns tiene una excelente compatibilidad con i18n. Puede mostrar formatos de fecha en diversos ajustes regionales. Sin embargo, la desventaja es que requiere que el desarrollador importe la configuración regional que necesita como un módulo independiente, a diferencia de Tempo, que no necesita módulos de configuración regional importados como un módulo o un complemento.

date-fns también admite el encadenamiento como Day.js. Sin embargo, ofrece la opción de usar un estilo de programación funcional cuando los desarrolladores usan las funciones de su fpsubmódulo. date-fns tiene un estilo de formato único, y este es más extenso que el de Tempo. A pesar de ello, puede llevar más tiempo acostumbrarse a date-fns que a Tempo, que tiene una curva de aprendizaje más sencilla.

Tiempo contra Luxon

Luxon es otra biblioteca de fecha y hora escrita en JavaScript. Funciona tanto en navegadores como en Node.js. Su autor, Isaac Cambrion , también contribuyó a Moment.js antes de que quedara obsoleto. Ahora, el equipo de Moment.js recomienda Luxon, calificándolo como “una evolución de Moment.js”. La documentación de Luxon se puede encontrar en las páginas de GitHub de Moment.js.

Al momento de escribir este artículo, Luxon contaba con 14.800 estrellas en GitHub y recibía 7 millones de descargas semanales en npm. Es bastante popular y se usa ampliamente en muchos proyectos.

Luxon incluye un objeto personalizado, DateTime, que se utiliza para crear fechas y horas. La biblioteca no utiliza el Dateobjeto nativo de JavaScript. Por ejemplo, así es como se captura la fecha del sistema en Luxon:

importar { DateTime } desde 'luxon'constante ahora = DateTime.now()

Luxon es una biblioteca muy completa con numerosas funciones esenciales. Permite analizar cadenas de fecha localizadas y ofrece numerosas opciones de formato. Para i18n, Luxon utiliza la IntlAPI nativa de JavaScript. Además, funciona a la perfección con diferentes zonas horarias. Luxon no incluye plugins, módulos adicionales ni extensiones. Toda la funcionalidad de la biblioteca proviene del DateTimeobjeto.

Como se mencionó anteriormente, Tempo prefiere un estilo de programación más funcional. Luxon, por otro lado, utiliza patrones de encadenamiento de métodos, similares a Moment.js y Day.js. Por ejemplo, aquí se explica cómo formatear una fecha completa:

constante horaActual = FechaHora.ahora().formato("FFFF")// Martes, 19 de marzo de 2024 a las 12:32:09 p. m., hora estándar de África Occidental

En cuanto a tamaño, Luxon es la biblioteca más pesada de todas en comparación con Tempo en este artículo. Una vez minimizada y comprimida, ocupa 23 KB. Tempo supera a Luxon al ser más ligera y, al mismo tiempo, gestionar las fechas de forma muy eficiente.

Comparando las bibliotecas

A continuación se muestra una tabla que resume las características de las diferentes bibliotecas de manejo de fecha y hora analizadas en este artículo:

¿Deberías utilizar Tempo para tu próximo proyecto?

En este artículo, presentamos la biblioteca Tempo, explicamos su uso, sus características y capacidades, y aprendimos un poco sobre su funcionamiento interno. También comparamos Tempo con otras bibliotecas de fechas populares de JavaScript, como Day.js, date-fns y Luxon.

Incluso con las dificultades iniciales de las fechas en JavaScript, el ecosistema logró superarlas con buenas bibliotecas. Algunos usan la fecha nativa de JavaScript, mientras que otros han creado sus propias herramientas robustas para compensar las peculiaridades que puedan presentar. Con la API Temporal de JavaScript a punto de implementarse, trabajar con fechas y horas en JavaScript no hará más que mejorar.

Entonces, ¿deberías usar Tempo para tu próximo proyecto? Bueno, si buscas una herramienta fácil de entender a simple vista, que realice tareas básicas con fechas, tenga buenas capacidades de análisis y formato, buena documentación, sea ligera y altamente adaptable a treeshakes, sin duda deberías usar Tempo. Realiza la mayoría de las tareas que necesitamos en las bibliotecas de fechas de JavaScript modernas, y las hace de maravilla.

¿Estás agregando nuevas bibliotecas de JavaScript para crear nuevas funciones o mejorar el rendimiento? ¿Qué pasa si hacen lo contrario?

Sin duda, los frontends son cada vez más complejos. A medida que añadas nuevas bibliotecas de JavaScript y otras dependencias a tu aplicación, necesitarás mayor visibilidad para garantizar que tus usuarios no se encuentren con problemas desconocidos.

Construya con confianza: comience a monitorear de forma gratuita .

Si quieres conocer otros artículos parecidos a Manejo de fechas en JavaScript con Tempo puedes visitar la categoría Guias.