Cómo manejar la gestión de fecha y hora en React usando Day.js

La gestión de fecha y hora es crucial para cualquier aplicación, y React no es una excepción. Si bien JavaScript proporciona funciones integradas de manipulación de fecha y hora, pueden ser engorrosas. Afortunadamente, muchas bibliotecas de terceros pueden simplificar la gestión de fecha y hora en React. Una de esas bibliotecas es Day.js.

Day.js es una biblioteca liviana para analizar, validar, manipular y formatear fechas y horas en JavaScript.

Instalación de Day.js

El día.js biblioteca es una alternativa moderna a Moment.js, que es otra biblioteca utilizada para manejar fechas y horas. Day.js ofrece una API similar con una huella más pequeña y un rendimiento más rápido.

Para usar Day.js en su aplicación React, primero debe instalarlo. Puede hacerlo ejecutando el siguiente comando en su terminal:

npm instalar dayjs

Análisis y formateo de fechas y horas

Day.js proporciona una API sencilla para analizar y formatear fechas. Puede obtener la fecha y la hora utilizando el

díajs() método, pero primero, debe importarlo desde la biblioteca Day.js.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar diajs de'dayjs';
funciónaplicación() {
constante fecha = diajs();
consola.log (fecha); 
devolver (



Fecha y gestión del tiempo</p>
 </div>
 )
}
exportarpor defecto aplicación

El díajs() El método crea un nuevo objeto Day.js que representa una fecha y hora específicas. En el ejemplo anterior, el díajs() El método crea un objeto Day.js que representa la fecha y la hora actuales.

En su consola, el objeto Day.js se vería así:

El díajs() El método acepta un argumento de fecha opcional que puede ser una cadena, un número (marca de tiempo de Unix), un objeto de fecha de JavaScript, u otro objeto Day.js. El método generará un objeto Day.js que representa el argumento de fecha especificado.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar diajs de'dayjs';
funciónaplicación() {
constante fecha = diajs('2023-05-01');
consola.log (fecha); // objeto Day.js que representa la fecha especificada
constante unixDate = dayjs(1651382400000);
consola.log (fechaunix); // objeto Day.js que representa la fecha especificada
devolver (



Fecha y gestión del tiempo</p>
 </div>
 )
}
exportarpor defecto aplicación

La salida del objeto Day.js de este bloque de código será similar al bloque de código anterior, pero tendrá diferentes valores de propiedad.

Para mostrar las fechas generadas como objetos Day.js, debe usar el formato() método. El formato() El método de la biblioteca Day.js le permite formatear un objeto Day.js como una cadena de acuerdo con una cadena de formato específica.

El método toma una cadena de formato como argumento. El argumento de cadena puede incluir una combinación de letras y caracteres especiales, cada uno con un significado específico,

Por ejemplo:

importar Reaccionar de'reaccionar';
importar diajs de'dayjs';
funciónaplicación() {
constante fecha = diajs('2023-05-01').formato('dddd, MMMM D, AAAA'); // lunes, 1 de mayo de 2023
constante hora = diajs().formato('HH: mm: ss'); //09:50:23
constante unixDate = dayjs(1651382400000).formato('MM/DD/AA'); // 05/01/22
devolver (



{fecha}</p>

{unixDate}</p>

{hora}/p>
 </div>
 )
}
exportarpor defecto aplicación

El fecha La variable mostrará la fecha en este formato 'Miércoles, 26 de abril de 2023'. La cadena de formato es 'dddd, MMMM D, AAAA' dónde dddd es el día de la semana, MMMMM es el mes en palabras, D es el día del mes en uno o dos dígitos, y AAAA es el año en cuatro dígitos.

El unixFecha la variable se formatea como una cadena utilizando la cadena de formato 'MM/DD/AAAA,' que representa el mes en dos dígitos, el día del mes en dos dígitos y el año en cuatro dígitos.

El tiempo La variable muestra la hora actual en el formato especificado. La cadena de formato es ‘HH: mm: ss’ donde el S.S representa las horas, el milímetro representa los minutos, y el ss representa los segundos.

Manipulación de fechas y horas

Day.js proporciona varios métodos que facilitan la manipulación de fechas y horas. Puedes referirte a la día.js documentación oficial para obtener la lista completa de métodos disponibles para manipular fechas y horas.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar diajs de'dayjs';
funciónaplicación() {
constante fecha = diajs().add(7,'días').formato('dddd, MMMM D, AAAA'); // miércoles, 16 de junio de 2023 
constante hora = diajs().restar(2, 'horas').formato('HH: mm: ss'); // 07:53:00
devolver (



{fecha}</p>

{hora}/p>
 </div>
 )
}
exportarpor defecto aplicación

El bloque de código anterior utiliza el agregar() método para agregar 7 días a la fecha actual. El agregar() El método le permite agregar una cantidad específica de tiempo a un objeto Day.js. El método toma dos argumentos, la cantidad de tiempo para sumar números y la unidad de tiempo para sumar.

Con el sustraer() método, puede restar una cantidad específica de tiempo de la día.js objeto. El tiempo variable resta 2 horas de la hora actual usando el sustraer() método.

Visualización del tiempo relativo

Day.js proporciona varios métodos que incluyen desde ahora(), para ahora(), a(), y de() para mostrar el tiempo relativo, como "hace 2 horas" o "en 3 días". Para utilizar estos métodos, importe el tiempo relativo complemento de dayjs/plugin/tiempo relativo en su aplicación React.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar diajs de'dayjs';
importar tiempo relativo de'dayjs/plugin/relativeTime';
funciónaplicación() {
 dayjs.extend (tiempo relativo);

constante fecha = diajs().add(7, 'días')
constante fechaRelativa = fecha.DesdeAhora(); // en 7 dias
constante fecha2 = diajs().restar(2, 'horas');
constante fecharelativa2 = fecha2.toNow(); // en 2 horas
constante ultimoAno = diajs().restar(1, 'año');
constante diff = fecha.desde (lastYear); // en un año
constante diff2 = fecha.hasta (últimoaño) // Hace un año
devolver (



{ fecha relativa }</p>

{ fecha relativa2 }</p>

{ diferencia }</p>

{ diferencia2 }</p>
 </div>
 )
}
exportarpor defecto aplicación

El desde ahora() La función muestra una cadena de tiempo relativo que representa la diferencia entre la hora actual y una fecha específica. En este ejemplo, el desde ahora() muestra la diferencia entre fecha y la hora actual.

El para ahora() función es similar a la desde ahora() función en la que muestra una cadena que representa la diferencia entre una fecha especificada y la hora actual. Cuando llamas al para ahora() función, devuelve una cadena de tiempo relativa a la hora actual.

Por último, usando el de() y a() funciones, puede mostrar una cadena de tiempo relativo que representa la diferencia entre dos fechas especificadas. En este ejemplo, obtienes la diferencia entre el año pasado y fecha utilizando el de() y a() funciones

Tenga en cuenta que también puede pasar un argumento booleano opcional al desde ahora(), para ahora(), de(), y a() métodos para especificar si incluir o excluir el sufijo (por ejemplo, "hace" o "en").

Por ejemplo:

constante fecha = diajs().add(7, 'días')
constante fecharelativa = fecha.desdeahora(verdadero); // 7 días
constante fecha2 = diajs().restar(2, 'horas');
constante fecharelativa2 = fecha2.toNow(verdadero); // 2 horas
constante ultimoAno = diajs().restar(1, 'año');
constante diff = fecha.desde (lastYear, verdadero) // un año
constante diff2 = fecha.hasta (últimoaño, verdadero) // un año

Paso FALSO al argumento mostrará las fechas con el sufijo.

Administrar la fecha y la hora de manera efectiva

Administrar la fecha y la hora es un aspecto crucial de cualquier aplicación, y Day.js proporciona una biblioteca flexible y fácil de usar para manejar estas operaciones en una aplicación React. Al incorporar Day.js en su proyecto, puede formatear fácilmente fechas y horas, analizar cadenas y manipular duraciones.

Además, Day.js ofrece una variedad de complementos para ampliar su funcionalidad y hacerlo aún más poderoso. Ya sea que esté creando un calendario simple o un sistema de programación complejo, Day.js es una excelente opción para administrar la fecha y la hora en su aplicación React.