Moment.js es una biblioteca fantástica para manejar de manera eficiente la gestión de fecha y hora dentro de las aplicaciones React.

Administrar fechas y horas en React puede representar un desafío para aquellos que no están familiarizados con el área. Afortunadamente, existen varias bibliotecas que pueden ayudarlo con la administración de fecha y hora en React. Una de estas bibliotecas es Moment.js.

Moment.js es una biblioteca liviana con una forma simple de manipular y formatear fechas y horas en JavaScript.

Instalación de la biblioteca Moment.js

Momento.js la biblioteca es un paquete para administrar operaciones de fecha y hora en JavaScript. Instalar la biblioteca Moment.js es el primer paso para usar Moment.js en su aplicación React. Puede hacerlo ejecutando el siguiente comando en su terminal:

momento de instalación de npm

Una vez que se completa la instalación, puede usar Moment.js en su componente React.

Uso de Moment.js para mostrar la fecha y la hora

Puede usar Moment.js para mostrar fechas y horas en un formato específico dentro de su aplicación React. Para usar la biblioteca, importe

instagram viewer
momento del paquete instalado.

importar Reaccionar de'reaccionar';
importar momento de'momento';
funciónaplicación() {


constante fecha = momento().formato("MMMM DD AAAA");
constante tiempo = momento().formato("HH mm ss");


devolver (




 Hoyla fecha de es {fecha} 


 El tiempo es { tiempo } </p>
 </div>
 )
}


exportarpor defecto aplicación

El momento() El método crea un nuevo objeto de momento que representa un punto específico en el tiempo. El formato() El método formatea un objeto de momento en una representación de cadena.

El formato() El método toma un argumento de cadena que especifica el formato deseado para el objeto de momento. El argumento de cadena puede incluir una combinación de letras y caracteres especiales, cada uno con un significado específico.

Algunos de estos caracteres especiales son:

  • AAAA: Año con cuatro dígitos
  • AA: Año con dos dígitos
  • milímetro: Mes con dos dígitos
  • METRO: Mes con uno o dos dígitos
  • MMMMM: Mes en palabras
  • DD: Día del mes con dos dígitos
  • D: Día del mes con uno o dos dígitos
  • Hacer: Día del mes con el ordinal
  • S.S: Hora con dos dígitos
  • H: Hora con uno o dos dígitos
  • milímetro: Minuto con dos dígitos
  • metro: Minuto con uno o dos dígitos
  • ss: Segundo con dos dígitos
  • s: Segundo con uno o dos dígitos

Cuando el aplicación componente en el bloque de código anterior, la fecha y la hora actuales se muestran en el formato especificado en la pantalla.

El momento() El método puede tomar un argumento de fecha u hora de cadena. Cuando el momento() tiene un argumento de fecha u hora de cadena, crea un objeto de momento que representa esa fecha u hora. La cadena puede estar en varios formatos, como ISO 8601, RFC 2822 o marca de tiempo de Unix.

Por ejemplo:

constante fecha = momento('1998-06-23').formato("MMMM DD AAAA");

Uso de Moment.js para manipular la fecha y la hora

La biblioteca Moment.js también proporciona varios métodos para manipular fechas y horas. Estos métodos le permiten sumar o restar intervalos de tiempo, establecer valores específicos para componentes de fecha y hora y realizar otras operaciones aplicables.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar momento de'momento';
funciónaplicación() {


constante mañana = momento().add(1, 'día').formato("Haz MMMM, AAAA");
constante tiempo = momento().restar(1, 'hora').formato("HH: mm: ss");
constante ultimoAno = momento().set('año', 2022).colocar('mes', 1).formato("Haz MMMM, AAAA");
constante hora = momento().get('hora');


devolver (


"Aplicación">
Mañanala fecha de es {mañana}


Esta fue la hora: { hora }, hace una hora</p>


{ último año }</p>


{ hora }</p>
 </div>
 )
}


exportarpor defecto aplicación

En este ejemplo, usted declarar las siguientes variables de JavaScript: mañana, tiempo, el año pasado, y hora. Estas cuatro variables utilizan varios métodos de la biblioteca Moment.js para manipular la fecha y la hora.

El mañana variable utiliza el agregar() método para agregar un día a la fecha actual. El agregar() El método agrega tiempo a un objeto Momento dado. La función toma dos argumentos: un valor de duración y una cadena que representa la unidad de tiempo a agregar. La unidad podría ser años, meses, semanas, días, horas, minutos, y segundos.

También puede restar tiempo usando el sustraer() método. En este caso, el tiempo variable utiliza el sustraer() método para restar una hora de la hora actual.

Utilizando el colocar() método, el el año pasado variable establece el año en 2022 y el mes en febrero (ya que enero se representa como el mes 0). El colocar() El método asigna una unidad de tiempo particular a un objeto Momento.

Con el conseguir() método, puede recuperar una hora específica. El conseguir() El método toma un solo argumento, una unidad de tiempo.

Uso de Moment.js para analizar fecha y hora

Otra característica útil de Moment.js es su capacidad para analizar fechas y horas a partir de cadenas. Esto puede ser útil cuando se trabaja con datos de fuentes externas.

Para analizar una fecha u hora de una cadena, necesita usar el momento() método. En este caso, el momento() El método toma dos argumentos, la cadena de fecha y una cadena de formato.

Aquí hay un ejemplo de cómo puede usar el momento() método para analizar fechas y horas:

importar Reaccionar de'reaccionar';
importar momento de'momento';
funciónaplicación() {


constante fecha = momento('2920130000', 'Do-MMMM-AAAA').hasta la fecha();
consola.log(fecha);


devolver (


</div>
 )
}
exportarpor defecto aplicación

En el bloque de código anterior, momento() El método analizará esta cadena '2920130000' utilizando la cadena de formato "Do-MMMM-YYYY". El hasta la fecha() El método convierte el objeto de momento en un objeto Date de JavaScript nativo.

El hasta la fecha() El método no acepta argumentos y devuelve un objeto de fecha de JavaScript que representa la misma fecha y hora que el objeto de momento.

Visualización del tiempo relativo

Con la biblioteca Moment.js, puede formatear y mostrar el tiempo relativo. Para hacer esto, utiliza el desde ahora() y para ahora() métodos. Estos métodos muestran el tiempo entre una fecha determinada y la hora actual.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar momento de'momento';
funciónaplicación() {


constante ayer = momento().restar(7, 'día');
constante hora1 = ayer.desdeahora(); // Hace 7 días
constante hora2 = ayer.hastaahora(); // en 7 dias


devolver (




{ hora1 }</p>


{ tiempo2 }</p>
 </div>
 )
}


exportarpor defecto aplicación

En este ejemplo, el desde ahora() devuelve el tiempo relativo transcurrido desde la fecha especificada, mientras que el para ahora() método devuelve el tiempo relativo hasta la hora actual.

Más en Moment.js

Moment.js es una potente biblioteca que proporciona una forma sencilla de manipular y formatear fechas y horas en JavaScript. Ha aprendido a manipular, mostrar y analizar fechas y horas en React usando Moment.js.

Moment.js ofrece varios otros métodos, como local, startOf, endOf, etc. Sin embargo, con la información proporcionada, está más que preparado para comenzar a usar Moment.js en su aplicación React.