Artigo original: https://www.freecodecamp.org/news/how-to-format-dates-in-javascript/

Por muito tempo, usei bibliotecas como a Date-fns sempre que precisei formatar datas em JavaScript. É muito estranho, porém, sempre que faço isso em pequenos projetos que exigem formatos de data simples e que o JavaScript oferece por padrão.

Descobri que a maioria dos desenvolvedores faz muito isso. Eu pensei que essa era a melhor maneira até que descobri recentemente que nem sempre precisamos usar bibliotecas para formatar datas em JavaScript.

Caso você queira conferir, aqui está o código: 👇

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) 
// "Friday, Jul 2, 2021"

Depois de tentar isso em seu próprio código e ver que funciona, vamos entender por que funciona e aprender algumas outras maneiras de formatar datas em JavaScript com apenas uma linha de código.

Aqui, você verá um Scrim interativo sobre formatação de datas em JavaScript com uma linha de código (em inglês)

Como formatar datas em JS

Obter a data em JavaScript, geralmente, não é um problema, mas formatar essas datas para que se ajustem ao seu projeto pode ser complicado para iniciantes. Por conta disso, a maioria das pessoas acaba usando bibliotecas.

O método mais usado para obter a data em JavaScript é o novo objeto new Date().

Por padrão, ao executar new Date() no terminal, ele usa o fuso horário do navegador e exibe a data como uma cadeia de caracteres de texto completo, como Fri Jul 02 2021 12:44:45 GMT+0100 (British Summer Time) – segunda-feira, 2 de julho de 2021 no horário de verão do Reino Unido.

Ter algo assim em sua página da web ou aplicação, no entanto, não é profissional e nem fácil de ler. Então, isso força você a procurar melhores maneiras de formatar essas datas.

Vamos dar uma olhada em alguns métodos que funcionam com um objeto de data.

Métodos para datas em JavaScript

Existem muitos métodos que você pode aplicar ao objeto de data que você pode usar para obter informações desse um objeto de data. Aqui estão alguns deles:

  • getFullYear() – obtém o ano como um número de quatro algarismos (aaaa)
  • getMonth() – obtém o mês como um número (0-11)
  • getDate() – obtém o dia como um número (1-31)
  • getHours() – obtém a hora (0-23)

Existem muitos outros…

Infelizmente, a maioria desses métodos ainda precisa de muito código para converter as datas para o formato que desejamos.

Por exemplo, new Date().getMonth() resultará em 6, o que representa o mês de Julho. Para poder usar o mês de Julho em um projeto, precisarei de um código grande e que pode resultar em algo bem trabalhoso:

const mesAtual = new Date();
const meses = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
console.log(meses[mesAtual.getMonth()]);

Vamos dar uma olhada em dois métodos que você pode usar para formatar suas datas da melhor maneira para que você possa usá-las em seus projetos.

O método toDateString() em JavaScript

O método toDateString() do JavaScript retorna a parte da data de um objeto na forma de uma string usando o seguinte formato:

  1. Três primeiras letras do nome do dia da semana
  2. Três primeiras letras do nome do mês
  3. Dia do mês em dois algarismos, com um zero à esquerda, se necessário
  4. Ano em quatro dígitos (no mínimo), com zeros à esquerda, se necessário
new Date().toDateString();
//"Fri Jul 02 2021" - Sexta-feira, 02 de julho de 2021

Uma grande desvantagem desse método é nossa incapacidade de manipular a saída da data da maneira que queremos.

Por exemplo, não é possível mostrar datas de acordo com o nosso idioma. Vamos dar uma olhada em outro método que, para mim, ainda é um dos melhores.

O método toLocaleDateString() em JavaScript

O método retorna o objeto de data como uma string usando convenções locais. Ele também usa opções como argumentos, que permitem que você/suas aplicações personalizem o comportamento da função.

Sintaxe:

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

Vamos ver alguns exemplos e seus resultados:

const currentDate = new Date();

const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };

console.log(currentDate.toLocaleDateString('pt-BR', options));
//sexta-feira, 2 de jul. de 2021

console.log(currentDate.toLocaleDateString('ar-EG', options))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString('en-us', options));
//Friday, Jul 2, 2021


Se você quiser, também pode não usar as opções ou configurações de local:

new Date().toLocaleDateString()
// "7/2/2021"

Também é possível usar apenas as configurações de local. Fazer isso exibirá a mesma informação que antes, com base no fuso horário em que se encontra o navegador.

new Date().toLocaleDateString('en-US')
"7/2/2021"

Você também pode modificar as opções, se quiser. Existem quatro opções básicas:

  • weekday – exibe o dia da semana, dependendo do modo como você quer que ele apareça (curto ou extenso - em inglês, short ou long).
  • year – exibe o ano como um número (em inglês, numeric)
  • month – exibe o mês do ano, dependendo de como você quer que ele apareça (curto ou extenso).
  • day – exibe o dia como um número
new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"}) // "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

Conclusão

O objeto de data tem sete métodos de formatação. Cada um dos métodos retorna um valor específico:

  1. toString() retorna Fri Jul 02 2021 14:03:54 GMT+0100 (British Summer Time)
  2. toDateString() retorna Fri Jul 02 2021
  3. toLocaleString() retorna 7/2/2021, 2:05:07 PM
  4. toLocaleDateString() retorna 7/2/2021
  5. toGMTString() retorna Fri, 02 Jul 2021 13:06:02 GMT
  6. toUTCString() retorna Fri, 02 Jul 2021 13:06:28 GMT
  7. toISOString() retorna 2021-07-02T13:06:53.422Z

Se você estiver procurando por formatos de data mais avançados, precisará criar um formato personalizado por conta própria. Confira os recursos abaixo para ajudá-lo a entender como criar formatos de data personalizados.

Recursos úteis (em inglês)