Moment.js é uma biblioteca fantástica para lidar eficientemente com o gerenciamento de data e hora em aplicativos React.

Gerenciar datas e horas no React pode ser um desafio para quem não tem familiaridade com a área. Felizmente, existem várias bibliotecas que podem ajudá-lo com o gerenciamento de data e hora no React. Uma dessas bibliotecas é Moment.js.

Moment.js é uma biblioteca leve com uma maneira simples de manipular e formatar datas e horas em JavaScript.

Instalando a biblioteca Moment.js

Moment.js biblioteca é um pacote para gerenciar operações de data e hora em JavaScript. Instalar a biblioteca Moment.js é a primeira etapa para usar Moment.js em seu aplicativo React. Você pode fazer isso executando o seguinte comando no seu terminal:

momento de instalação do npm

Depois que a instalação estiver concluída, você poderá usar o Moment.js em seu componente React.

Usando Moment.js para exibir data e hora

Você pode usar Moment.js para exibir datas e horas em um formato específico em seu aplicativo React. Para usar a biblioteca, importe momento do pacote instalado.

instagram viewer 
importar Reagir de'reagir';
importar momento de'momento';
funçãoAplicativo() {


const data = momento().format("MMMM DD AAAA");
const tempo = momento().format("HH mm ss");


retornar (




 Hojea data é { data } 


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


exportarpadrão Aplicativo

O momento() O método cria um novo objeto de momento que representa um ponto específico no tempo. O formatar() O método formata um objeto de momento em uma representação de string.

O formatar() O método recebe um argumento de string especificando o formato desejado para o segundo objeto. O argumento string pode incluir uma combinação de letras e caracteres especiais, cada um com um significado específico.

Alguns desses caracteres especiais são:

  • AAAA: Ano com quatro dígitos
  • AA: Ano com dois dígitos
  • MILÍMETROS: Mês com dois dígitos
  • M: Mês com um ou dois dígitos
  • MMMM: Mês em palavras
  • DD: Dia do mês com dois dígitos
  • D: Dia do mês com um ou dois dígitos
  • Fazer: Dia do mês com o ordinal
  • HH: Hora com dois dígitos
  • H: Hora com um ou dois dígitos
  • milímetros: Minuto com dois dígitos
  • m: Minuto com um ou dois dígitos
  • ss: Segundo com dois dígitos
  • s: Segundo com um ou dois dígitos

Quando o Aplicativo componente no bloco de código anterior é renderizado, a data e hora atuais são exibidas no formato especificado na tela.

O momento() O método pode receber um argumento de data ou hora de string. Quando o momento() método tem um argumento de data ou hora de string, ele cria um objeto moment que representa essa data ou hora. A string pode estar em vários formatos, como ISO 8601, RFC 2822 ou timestamp Unix.

Por exemplo:

const data = momento('1998-06-23').formatar("MMMM DD AAAA");

Usando Moment.js para manipular data e hora

A biblioteca Moment.js também fornece vários métodos para manipular datas e horas. Esses métodos permitem adicionar ou subtrair intervalos de tempo, definir valores específicos para componentes de data e hora e executar outras operações aplicáveis.

Por exemplo:

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


const amanhã = momento().add(1, 'dia').formatar("Faça MMMM, AAAA");
const tempo = momento().subtract(1, 'hora').formatar("HH: mm: ss");
const últimoAno = momento().set('ano', 2022).definir('mês', 1).formatar("Faça MMMM, AAAA");
const hora = momento().get('hora');


retornar (


"Aplicativo">
Amanhãa data de hoje é { amanhã }


Esta foi a hora: { hora }, uma hora atrás</p>


{ ano passado }</p>


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


exportarpadrão Aplicativo

Neste exemplo, você declare as seguintes variáveis ​​JavaScript: amanhã, tempo, ano passado, e hora. Essas quatro variáveis ​​usam vários métodos da biblioteca Moment.js para manipular data e hora.

O amanhã variável usa o adicionar() método para adicionar um dia à data atual. O adicionar() O método adiciona tempo a um determinado objeto Moment. A função recebe dois argumentos: um valor de duração e uma string que representa a unidade de tempo a ser adicionada. A unidade pode ser anos, meses, semanas, dias, horas, minutos, e segundos.

Você também pode subtrair o tempo usando o subtrair() método. Neste caso, o tempo variável usa o subtrair() método para subtrair uma hora da hora atual.

Usando o definir() método, o ano passado A variável define o ano como 2022 e o mês como fevereiro (já que janeiro é representado como mês 0). O definir() O método atribui uma determinada unidade de tempo a um objeto Moment.

Com o pegar() método, você pode recuperar um horário específico. O pegar() método leva um único argumento, uma unidade de tempo.

Usando Moment.js para analisar data e hora

Outro recurso útil do Moment.js é sua capacidade de analisar datas e horas de strings. Isso pode ser útil ao trabalhar com dados de fontes externas.

Para analisar uma data ou hora de uma string, você precisa usar o momento() método. Neste caso, o momento() O método usa dois argumentos, a string de data e uma string de formato.

Aqui está um exemplo de como você pode usar o momento() método para analisar datas e horas:

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


const data = momento('2920130000', 'Faça-MMMM-AAAA').a data();
console.log( data );


retornar (


</div>
 )
}
exportarpadrão Aplicativo

No bloco de código acima, momento() O método analisará esta string '2920130000' usando a string de formato "Do-MMMM-YYYY". O a data() O método converte o objeto de momento em um objeto Data JavaScript nativo.

O a data() O método não aceita argumentos e retorna um objeto JavaScript Date representando a mesma data e hora do objeto moment.

Exibindo Tempo Relativo

Com a biblioteca Moment.js, você pode formatar e exibir o tempo relativo. Para fazer isso, você usa o a partir de agora() e para agora() métodos. Esses métodos exibem o tempo entre uma determinada data e a hora atual.

Por exemplo:

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


const ontem = momento().subtrair(7, 'dia');
const hora1 = ontem.deAgora(); // 7 dias atrás
const hora2 = ontem.paraAgora(); // em 7 dias


retornar (




{ tempo1 }</p>


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


exportarpadrão Aplicativo

Neste exemplo, o a partir de agora() método retorna o tempo relativo decorrido desde a data especificada, enquanto o método para agora() O método retorna o tempo relativo até a hora atual.

Mais para Moment.js

Moment.js é uma biblioteca poderosa que fornece uma maneira simples de manipular e formatar datas e horas em JavaScript. Você aprendeu como manipular, exibir e analisar datas e horas no React usando Moment.js.

Moment.js oferece vários outros métodos, como local, startOf, endOf e assim por diante. No entanto, com as informações fornecidas, você está mais do que preparado para começar a usar o Moment.js em seu aplicativo React.