Formatando data com javascript

Usando a função toLocaleDateString() nativa do javascript, você consegue converter uma data de uma forma rápida

O método toLocaleDateString () retorna uma string contendo a representação da parte da data com base no idioma. Os novos parâmetros de locales e code permitem que os aplicativos especifiquem o idioma no qual suas convenções de formato devem ser usadas e permitem comportamentos de função personalizados. Na implementação antiga que ignorava os parâmetros de locales e code, a localidade usada e a forma da string retornada dependiam completamente da implementação nativa.

exemplo:

let data = new Date();
console.log(data);
// sem toLocaleDateString
// saida: Sun Jun 20 2021 16:16:07 GMT-0300 (Horário Padrão de Brasília)
console.log(data.toLocaleDateString());
// Com toLocaleDateString
// saida: 20/06/2021

Caso você queira forçar a saida de dados para o padrão brasileiro, basta passar 'pt-br' como parametro do toLocaleDateString(); exemplo:

new Date(myDateString).toLocaleDateString('pt-br');
console.log(new Date('2021/01/07').toLocaleDateString('pt-br'));
//saida: "07/01/2021"

Como Separar Mês Data e ano de uma data com javascript? e como alterar para a data para o formato texto?

O Método toLocaleDateString pode receber um segundo argumento chamado options

Usando options

Exibindo apenas o Dia em formato numérico (não funciona em formato texto)

let data = new Date();
let options = { day: 'numeric' };
console.log(data.toLocaleDateString('pt-br', options));
//saida: 20 (dia de hoje)

Exibindo apenas o Mês em formato de texto

let data = new Date();
let options = { month: 'long' };
console.log(data.toLocaleDateString('pt-br', options));
//saida: junho

Exibindo apenas o Ano em formato numérico (nao funciona em formato texto)

let data = new Date();
let options = { year: 'numeric' };
console.log(data.toLocaleDateString('pt-br', options));
//saida: 2021

Exibindo o dia da semana (segunda, terça, quarta etc ) em formato texto

let data = new Date();
let options = { weekday: 'long' };
console.log(data.toLocaleDateString('pt-br', options));
//saida: Domingo

Para finalizar combinando tudo

let data = new Date();
let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(data.toLocaleDateString('pt-br', options));
// Saida: domingo, 20 de junho de 2021

Performance

Ao formatar um grande número de datas, o melhor jeito é usar o objeto Intl.DateTimeFormat e usar a função fornecido porsua propriedade format

O Intl.DateTimeFormat é um objeto que facilita a formatação de datas e horários de acordo com uma determinada cultura. Ele é extremamente útil quando estamos trabalhando com datas em aplicações globais.

Aqui estão alguns exemplos que podem gerar dúvidas comuns:

Como eu posso mostrar o nome completo do mês usando Intl.DateTimeFormat?

Para exibir o nome completo do mês, você deve passar o parâmetro { month: 'long' } para o Intl.DateTimeFormat.

let data = new Date();
let formatador = new Intl.DateTimeFormat('pt-BR', { month: 'long' });
console.log(formatador.format(data));
// Saída: julho (se estivermos em julho)

É possível exibir o dia da semana?

Sim, é possível! Use a opção { weekday: 'long' } para exibir o dia da semana.

let data = new Date();
let formatador = new Intl.DateTimeFormat('pt-BR', { weekday: 'long' });
console.log(formatador.format(data));
// Saída: domingo (se for domingo)

E se eu quiser exibir o ano em duas cifras em vez de quatro?

É só usar a opção { year: '2-digit' }.

let data = new Date();
let formatador = new Intl.DateTimeFormat('pt-BR', { year: '2-digit' });
console.log(formatador.format(data));
// Saída: 23 (se estivermos em 2023)

Como posso adicionar horário na formatação?

Você pode incluir a hora, minutos e até mesmo segundos utilizando as opções { hour: 'numeric' }, { minute: 'numeric' } e { second: 'numeric' }, respectivamente.

let data = new Date();
let formatador = new Intl.DateTimeFormat('pt-BR', { hour: 'numeric', minute: 'numeric', second: 'numeric' });
console.log(formatador.format(data));
// Saída: 15:30:20 (se for 15 horas, 30 minutos e 20 segundos)

É possível adicionar o fuso horário na formatação?

Com certeza! Utilize a opção { timeZoneName: 'short' } para exibir o nome curto do fuso horário ou { timeZoneName: 'long' } para o nome completo.

let data = new Date();
let formatador = new Intl.DateTimeFormat('pt-BR', { timeZoneName: 'short' });
console.log(formatador.format(data));
// Saída: GMT-3 (se o fuso horário for GMT-3)

Esperamos que esses exemplos tenham ajudado a esclarecer algumas dúvidas comuns sobre o Intl.DateTimeFormat. Continue explorando e descobrindo mais sobre as funcionalidades incríveis que o JavaScript tem a oferecer!