A biblioteca Day.js facilita o manuseio de operações de data e hora em aplicativos React.

O gerenciamento de data e hora é crucial para qualquer aplicativo, e o React não é exceção. Embora o JavaScript forneça funções integradas de manipulação de data e hora, elas podem ser complicadas. Felizmente, muitas bibliotecas de terceiros podem simplificar o gerenciamento de data e hora no React. Uma dessas bibliotecas é Day.js.

Day.js é uma biblioteca leve para analisar, validar, manipular e formatar datas e horas em JavaScript.

Instalando Day.js

O dia.js biblioteca é uma alternativa moderna para Moment.js, que é outra biblioteca usada para lidar com datas e horas. O Day.js oferece uma API semelhante com uma pegada menor e desempenho mais rápido.

Para usar Day.js em seu aplicativo React, primeiro você precisa instalá-lo. Você pode fazer isso executando o seguinte comando no seu terminal:

npm instalar dayjs

Analisando e formatando datas e horas

Day.js oferece uma API simples para analisar e formatar datas. Você pode obter a data e a hora usando o

dayjs() método, mas primeiro você precisa importá-lo da biblioteca Day.js.

Por exemplo:

importar Reagir de'reagir';
importar dayjs de'dayjs';
funçãoAplicativo() {


const data = diajs();
console.log (data); 


retornar (




Data e Gestão do Tempo</p>
 </div>
 )
}


exportarpadrão Aplicativo

O dayjs() O método cria um novo objeto Day.js representando uma data e hora específicas. No exemplo acima, o dayjs() O método cria um objeto Day.js que representa a data e hora atuais.

Em seu console, o objeto Day.js ficaria assim:

O dayjs() O método aceita um argumento de data opcional que pode ser uma string, um número (timestamp do Unix), um objeto Data JavaScript, ou outro objeto Day.js. O método irá gerar um objeto Day.js representando o argumento de data especificado.

Por exemplo:

importar Reagir de'reagir';
importar dayjs de'dayjs';
funçãoAplicativo() {


const data = diajs('2023-05-01');
console.log (data); // Objeto Day.js representando a data especificada


const unixData = diajs(1651382400000);
console.log (unixDate); // Objeto Day.js representando a data especificada


retornar (




Data e Gestão do Tempo</p>
 </div>
 )
}


exportarpadrão Aplicativo

A saída do objeto Day.js desse bloco de código será semelhante ao bloco de código anterior, mas terá valores de propriedade diferentes.

Para exibir as datas geradas como objetos Day.js, você precisa usar o formatar() método. O formatar() O método da biblioteca Day.js permite formatar um objeto Day.js como uma string de acordo com uma string de formato específica.

O método usa uma string de formato como seu argumento. O argumento string pode incluir uma combinação de letras e caracteres especiais, cada um com um significado específico,

Por exemplo:

importar Reagir de'reagir';
importar dayjs de'dayjs';
funçãoAplicativo() {


const data = diajs('2023-05-01').formatar('dddd, MMMM D, AAAA'); // segunda-feira, 1 de maio de 2023
const hora = dayjs().format('HH: mm: ss'); //09:50:23
const unixData = diajs(1651382400000).formatar('MM/DD/AA'); // 05/01/22


retornar (




{data}</p>


{data unix}</p>


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


exportarpadrão Aplicativo

O data A variável exibirá a data neste formato 'Quarta-feira, 26 de abril de 2023'. A string de formato é 'dddd, MMMM D, AAAA' onde dddd é o dia da semana, MMMM é o mês em palavras, D é o dia do mês em um ou dois dígitos, e AAAA é o ano em quatro dígitos.

O unixDate a variável é formatada como uma string usando a string de formato 'MM/DD/AAAA,' que representa o mês em dois dígitos, o dia do mês em dois dígitos e o ano em quatro dígitos.

O tempo variável exibe a hora atual no formato especificado. A string de formato é ‘HH: mm: ss’ onde o HH representa as horas, o milímetros representa os minutos, e o ss representa os segundos.

Manipulação de datas e horas

Day.js fornece vários métodos que facilitam a manipulação de datas e horas. Você pode consultar o dia.js documentação oficial para obter a lista completa de métodos disponíveis para manipulação de datas e horas.

Por exemplo:

importar Reagir de'reagir';
importar dayjs de'dayjs';
funçãoAplicativo() {


const data = dayjs().add(7,'dias').formatar('dddd, MMMM D, AAAA'); // Quarta-feira, 16 de junho de 2023 
const hora = dayjs().subtract(2, 'horas').formatar('HH: mm: ss'); // 07:53:00


retornar (




{data}</p>


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


exportarpadrão Aplicativo

O bloco de código acima usa o adicionar() método para adicionar 7 dias à data atual. O adicionar() O método permite adicionar um período de tempo especificado a um objeto Day.js. O método usa dois argumentos, a quantidade de tempo para adicionar números e a unidade de tempo para adicionar.

Com o subtrair() método, você pode subtrair uma quantidade especificada de tempo do dia.js objeto. O tempo variável subtrai 2 horas da hora atual usando o subtrair() método.

Exibindo Tempo Relativo

Day.js fornece vários métodos, incluindo a partir de agora(), para agora(), para(), e de() para exibir o tempo relativo, como "2 horas atrás" ou "em 3 dias". Para usar esses métodos, importe o hora relativa plug-in de dayjs/plugin/relativeTime em seu aplicativo React.

Por exemplo:

importar Reagir de'reagir';
importar dayjs de'dayjs';
importar hora relativa de'dayjs/plugin/relativeTime';
funçãoAplicativo() {


 dayjs.extend (relativeTime);

const data = dayjs().add(7, 'dias')
const datarelativa = data.fromNow(); // em 7 dias


const data2 = dayjs().subtract(2, 'horas');
const relativaData2 = data2.toAgora(); // Em 2 horas


const últimoAno = dayjs().subtract(1, 'ano');
const diff = date.from (lastYear); // em um ano
const diff2 = date.to (lastYear) // um ano atrás


retornar (




{ data relativa }</p>


{ data relativa2 }</p>


{diferente }</p>


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


exportarpadrão Aplicativo

O a partir de agora() A função exibe uma string de tempo relativo representando a diferença entre a hora atual e uma data especificada. Neste exemplo, o a partir de agora() mostra a diferença entre data e a hora atual.

O para agora() função é semelhante ao a partir de agora() função na medida em que exibe uma string representando a diferença entre uma data especificada e a hora atual. Quando você chama o para agora() função, ela retorna uma string de tempo relativo para a hora atual.

Por último, usando o de() e para() funções, você pode exibir uma string de tempo relativo representando a diferença entre duas datas especificadas. Neste exemplo, você obtém a diferença entre ano passado e data usando o de() e para() funções.

Observe que você também pode passar um argumento booleano opcional para o a partir de agora(), para agora(), de(), e para() métodos para especificar se deseja incluir ou excluir o sufixo (por exemplo, "atrás" ou "em").

Por exemplo:

const data = dayjs().add(7, 'dias')
const datarelativa = data.fromNow(verdadeiro); // 7 dias
const data2 = dayjs().subtract(2, 'horas');
const relativaData2 = data2.toAgora(verdadeiro); // 2 horas
const últimoAno = dayjs().subtract(1, 'ano');
const diff = date.from (últimoAno, verdadeiro) // um ano
const diff2 = date.to (últimoAno, verdadeiro) // um ano

Passagem falso ao argumento exibirá as datas com o sufixo.

Gerenciando Data e Hora Efetivamente

O gerenciamento de data e hora é um aspecto crucial de qualquer aplicativo, e o Day.js fornece uma biblioteca flexível e fácil de usar para lidar com essas operações em um aplicativo React. Ao incorporar Day.js em seu projeto, você pode facilmente formatar datas e horas, analisar strings e manipular durações.

Além disso, o Day.js oferece uma variedade de plug-ins para estender sua funcionalidade e torná-lo ainda mais poderoso. Esteja você criando um calendário simples ou um sistema de agendamento complexo, o Day.js é uma excelente opção para gerenciar data e hora em seu aplicativo React.