1/10/2021 Roberto Umbelino

Formatar datas no Javascript

Fala personas, venho hoje trazer um conteúdo simples, porém que pode ser uma mão na roda em determinados momentos. 👊

Sabemos que trabalhar com datas no javascript não é das melhores coisas 😁, (como por exemplo realizar formatações), mas dessa vez eu prometo que será algo bem tranquilo e que vai ser bastante útil.

📑 Sobre

Atualmente no mercado há algumas bibliotecas que facilitam as formatações de datas no javascript, sendo as principais o (⭐ date-fns e moment ⭐), portanto instalar essas bibliotecas em seu projeto traz uma quantidade de recursos que não serão utilizados, deixando apenas o pacote de sua aplicação mais pesado. 📦

Uma ótima maneira de contornar isso é utilizar as próprias funções nativas do javascript, e meu/minha caro/a, venho lhe informar que existe uma baita função nativa no javascript para trabalhar com formatação de datas, que é o toLocaleDateString.

O toLocaleDateString é prototype do Date focado na parte de apresentação das datas.

Bora dar uma olhada em alguns exemplos, que vai ficar bem mais fácil entender. 😉

📚 Tipos de formatação toLocaleDateString

Esse método recebe dois argumentos, sendo eles o local e opções.

• Local: Seguirá o padrão de formatação do local informado, por exemplo pt-BR, en-US. Obs: caso não informado será utilizado a localização do navegador.

• Opções: Configurações para formatar a data de acordo com sua vontade.

Chega de papo vamos aos exemplos. 💪

⭐ Somente data

const date = new Date().toLocaleDateString('pt-BR')
console.log(date) // 16/07/2021

⭐ Data formatada

const date = new Date().toLocaleDateString('pt-BR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
})
console.log(date) // 16 de julho de 2021

⭐ Data e hora formatada

const date = new Date().toLocaleDateString('pt-BR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
})
console.log(date) // 16 de julho de 2021 20:17

⭐ Data e hora incluindo segundos

const date = new Date().toLocaleDateString('pt-BR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
})
console.log(date) // 16 de julho de 2021 20:17:11

⭐ Data e hora incluindo dia da semana

const date = new Date().toLocaleDateString('pt-BR', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
})
console.log(date) // sexta-feira, 16 de julho de 2021 20:17:11

Como você pode ver é bem prático utilizar esse método para formatação. 🙃

Aqui vai todas as possíveis opções para serem utilizadas na formatação.

✅ As possíveis opções:

• weekday: long (terça-feira) | short (ter.) | narrow (T)
• era: long (20 de 7 de 2021 depois de Cristo) | short (20 de 7 de 2021 d.C.) | narrow (20 de 7 de 2021 d.C.)
• year: numeric (2021) | 2-digit (21)
• month: numeric (7) | 2-digit (07) | long (julho) | short (jul.) | narrow (J)
• day: numeric (20) | 2-digit (20)
• hour: numeric (19) | 2-digit (19)
• minute: numeric (53) | 2-digit (53)
• second: numeric (7) | 2-digit (7)
• timeZoneName: long (20/07/2021 Horário Padrão de Brasília) | short (20/07/2021 BRT)

Obs: vou deixar o link do artigo original em inglês caso queiram entender um pouco melhor. 👍

🔗 Referências

Você pode estudar um pouco mais do assunto nos links:

• https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
• https://blog.yogeshchavan.dev/how-to-display-formatted-date-in-javascript-without-using-any-external-library

Se você curtiu esse conteúdo deixe o seu like e compartilhe com a galera. 😋

Roberto Umbelino.