Uso de Moment.js para aplicaciones React

1. ¿Qué es Moment.js?
2. Cómo usar Moment.js con React
3. Ejemplo práctico Moment.js
4. Paquete react-moment
5. Otras alternativas viables

Es difícil pensar en una aplicación web moderna que involucre fechas y horas. Las aplicaciones React no son la excepción a la regla.

Administrar la fecha y la hora es fundamental para crear aplicaciones dinámicas en React. Por este hecho, JavaScript incluye un objeto Date, que es útil para operaciones simples que involucran fecha y hora.

Sin embargo, trabajar con el objeto Date es más fácil decirlo que hacerlo. Date API es insuficiente para formatear, internacionalizar y, en general, manipular las fechas.

Por esta razón, la comunidad de desarrolladores de JavaScript ha creado muchas bibliotecas de datos para realizar algunas de las operaciones más avanzadas. Estos nos permiten trabajar con fechas de manera mucho más eficiente, sin perder tiempo y energía.

¿Qué es Moment.js?

Es una de las bibliotecas más estables para formatear fechas en JavaScript. La biblioteca Moment se usa principalmente para analizar y formatear valores de datos, pero tiene muchas funciones que pueden ser útiles para crear aplicaciones modernas.

Por ejemplo, Moment también es útil para la validación de datos. Funciona con ambos: Node.js y JavaScript normal.

Se puede utilizar para aplicaciones front-end, así como para la programación del lado del servidor. También es compatible con muchas bibliotecas populares de JavaScript, incluidas React y TypeScript.

La biblioteca proporciona una API que envuelve el objeto Date nativo en JavaScript. De esta manera, no tenemos que interactuar con la API Date original o cambiarla.

La biblioteca Moment es fácil de aprender y, como beneficio adicional, es compatible con muchos idiomas. Por lo que puede resolver nuestros problemas de internacionalización fácilmente.

En este momento, la biblioteca está en modo de mantenimiento. Todavía es estable y todos los métodos funcionan como se supone que deben hacerlo.

Sin embargo, los creadores decidieron dejar de lanzar nuevas versiones. Si está acostumbrado a Moment y desea usarlo para su aplicación React, puede hacerlo.

Aquellos preocupados por el futuro a largo plazo de su aplicación pueden considerar otras bibliotecas de fechas de JavaScript.

Cómo usar Moment.js con React

Debido a que Moment.js es una biblioteca externa, debemos instalarla en nuestra carpeta de proyecto. Y ya que estamos, también podemos instalar el paquete react-moment, del que hablaremos más adelante.

Si nuestra aplicación necesita las funciones de zona horaria, se recomienda instalar también moment-timezone:

npm install --save moment moment-timezone

Una vez que hayamos terminado de instalar los paquetes, debemos importarlos. Localiza el archivo donde pretendemos utilizarlos e impórtalos:

import moment from 'moment'
import Moment from 'react-moment'
import 'moment-timezone'

Ponemos en mayúscula Moment porque es un componente de React creado específicamente para la manipulación de fechas en esta biblioteca.

Ejemplo práctico Moment.js

Veamos un ejemplo del uso de la biblioteca Moment en React.

let momentObject = moment()

En este ejemplo, devolvemos un objeto de momento simple, que representa el tiempo de ejecución del código. La biblioteca Moment incluye muchos otros métodos que son mucho más interesantes.

Por ejemplo, el método .add() puede mutar el objeto agregando una cantidad específica de tiempo. Veamos un ejemplo:

moment().add(10, 'days')

Como podemos ver, el primer argumento del método .add() especifica la cantidad, y el segundo argumento es necesario para especificar el período de tiempo. Podemos encadenar varios métodos entre sí, por ejemplo:

moment().add(10, 'days').add(1, 'months')

Este código agregará un mes más a la fecha devuelta por la función moment().

Paquete react-moment

react-moment se basa en el paquete moment pero proporciona las mismas características en un componente. Echemos un vistazo a un ejemplo en el que tenemos que formatear la cadena como una fecha.

import React  from 'react';
import Moment from 'react-moment';

class App extends React.Component {
    render() {
        return (
            <Moment>{'1996-07-21T11:55-5500'}</Moment>
        );
    }
}
export default App

Alternativamente, podemos usar el atributo date en el componente Moment para pasar la cadena. La fecha ni siquiera tiene que ser una cadena; puede ser un array, un objeto o la instancia del objeto Date.

El componente Moment proporciona una manera fácil de usar las funciones principales de la biblioteca Moment en las aplicaciones React. El componente acepta muchos apoyos, como: date. format, trim, y muchos otros.

Para obtener información detallada, consulte la documentación oficial.

Otras alternativas viables

La biblioteca Moment no es la única biblioteca para trabajar con fechas en JavaScript. Paquetes como date-fns ofrecen una gran alternativa.

Tiene documentación muy informativa y tantas funciones como la biblioteca Moment. Cada función en esta biblioteca está documentada.

Sus nombres son fáciles de usar para que el propósito de la función sea fácil de entender.