Artigo original: JavaScript Date Now – How to Get the Current Date in JavaScript, escrito por Vijit Ail

Traduzido e adaptado por: Daniel Rosa

Muitas das aplicações que você construirá terão algum tipo de componente de data, seja para a data de criação de um recurso, seja para o carimbo de data/hora de uma atividade.

Lidar com a formatação de datas e carimbos de data/hora pode ser exaustivo. Neste guia, você aprenderá como obter a data atual em vários formatos em JavaScript.

Objeto Date do JavaScript

O JavaScript tem um objeto Date integrado que armazena a data e a hora e fornece métodos para lidar com ambos.

Para criar uma nova instância do objeto Date, use a palavra-chave new:

const date = new Date();

O objeto Date contém um Number que representa milissegundos que se passaram desde o início da Epoch, ou seja, 1º de janeiro de 1970.

Você pode passar uma string de data para o construtor de Date para criar um objeto para a data específica:

const date = new Date('Jul 12 2011');

Para obter o ano atual, use o método de instância getFullYear() do objeto Date. O método getFullYear() retorna o ano da data especificada no construtor de Date:

const currentYear = date.getFullYear();
console.log(currentYear); //2022

Da mesma forma, existem métodos para obter o dia atual do mês e o mês atual:

const today = date.getDate();
const currentMonth = date.getMonth() + 1; 

O método getDate() retorna o dia atual do mês (de 1 a 31).

O método getMonth() retorna o mês da data especificada. É importante observar a respeito do método getMonth() que ele retorna valores indexados em zero (ou seja, de 0 a 11), onde 0 representa janeiro e 11 representa dezembro. Por isso, é preciso adicionar 1 para "normalizar" o valor do mês.

Date now

now() é um método estático do objeto Date. Ele retorna o valor em milissegundos que representa o tempo que se passou desde a Epoch. Você pode passar os milissegundos retornados pelo método now() para o construtor de Date para instanciar o novo objeto Date:

const timeElapsed = Date.now();
const today = new Date(timeElapsed);

Formatação da data

Você pode formatar a data em formatos diversos (GMT, ISO e assim por diante) usando os métodos do objeto Date.

O método toDateString() retorna a data em um formato legível por seres humanos:

today.toDateString(); // "Sun Jan 30 2022"

O método toISOString() retorna a data seguindo o formato estendido da ISO 8601:

today.toISOString(); // "2022-01-30T18:30:00.000Z"

O método toUTCString() retorna a data em formato de fusos horários UTC :

today.toUTCString(); // "Sun, 30 Jan 2022 18:30:00 GMT"

O método toLocaleDateString() retorna a data em formato que observa o idioma:

today.toLocaleDateString(); // "30/1/2022"

Você encontrará a referência completa para os métodos Date na documentação da MDN.

Função de formatação de data personalizada

Além dos formatos mencionados na seção acima, sua aplicação pode ter um formato de data diferente. Ele pode ser ao estilo aa/dd/mm, aaaa-dd-mm ou algo assim.

Para lidar com essa questão, é melhor criar uma função reutilizável, que possa ser usada em diversos projetos.

Por isso, nesta seção, criaremos uma função utilitária que retornará a data no formato especificado no argumento da função:

const today = new Date();

function formatDate(date, format) {
	//
}

formatDate(today, 'mm/dd/aa');

Substitua as strings "mm", "dd", "aa" com os valores de mês, dia e ano respectivos a partir da string de formatação passada no argumento.

Para fazer isso, você pode usar o método replace(), conforme vemos abaixo:

format.replace('mm', date.getMonth() + 1);

Isso, no entanto, causará o encadeamento de métodos, tornando o código mais difícil de manter ao tentarmos tornar a função mais flexível:

format.replace('mm', date.getMonth() + 1)
    .replace('aa', date.getFullYear())
	.replace('dd', date.getDate());

Em vez do encadeamento de métodos, podemos fazer uso de expressões regulares com o método replace().

Primeiro, criamos um objeto que representará o par chave-valor da substring e seu valor respectivo:

const formatMap = {
	mm: date.getMonth() + 1,
    dd: date.getDate(),
    aa: date.getFullYear().toString().slice(-2),
    aaaa: date.getFullYear()
};

Em seguida, usamos a expressão regular para que ela corresponda às strings e as substitua:

formattedDate = format.replace(/mm|dd|aa|aaaa/gi, matched => map[matched]);

A função completa tem essa aparência:

function formatDate(date, format) {
    const map = {
        mm: date.getMonth() + 1,
        dd: date.getDate(),
        aa: date.getFullYear().toString().slice(-2),
        aaaa: date.getFullYear()
    }

    return format.replace(/mm|dd|aa|aaaa/gi, matched => map[matched])
}

Você também pode adicionar a capacidade de formatar carimbos de data/hora na função.

Conclusão

Espero que, agora, você tenha um entendimento melhor do objeto Date em JavaScript. Você também pode utilizar bibliotecas de terceiros, como a datesj e a moment, para lidar com as datas na sua aplicação.

Até a próxima! Fiquem seguros e sigam em frente.