Date. Formatação de datas e números

2.1 Objeto Date

Trabalhar com datas e números é uma parte importante do desenvolvimento de aplicativos web. JavaScript fornece objetos e métodos embutidos para manipular datas e números. Nesta palestra, vamos dar uma olhada no objeto Date, seus métodos e formas de formatar datas e números.

O objeto Date no JavaScript representa uma data e hora. Ele possui muitos métodos para trabalhar com datas, incluindo obter a data e a hora atuais, definir data e hora, além de formatação.

Criando um objeto Date

Você pode criar um objeto Date de várias maneiras.

1. Data e hora atuais:

const now = new Date();

console.log(now); // Exibe a data e hora atuais

2. Definindo uma data e hora específica:

const specificDate = new Date('2024-07-07T10:00:00');

console.log(specificDate); // Exibe a data 7 de julho de 2024

3. Definindo data e hora usando valores numéricos:

const anotherDate = new Date(2024, 6, 7, 10, 0, 0);

console.log(anotherDate); // Exibe a data 7 de julho de 2024

2.2 Métodos do objeto Date()

Obtendo componentes de data:

• getFullYear(): obter o ano (quatro dígitos)
• getMonth(): obter o mês (de 0 a 11)
• getDate(): obter o dia do mês (de 1 a 31)
• getHours(): obter as horas (de 0 a 23)
• getMinutes(): obter os minutos (de 0 a 59)
• getSeconds(): obter os segundos (de 0 a 59)

Exemplo:

const now = new Date();

console.log(now.getFullYear()); // Ano atual
console.log(now.getMonth()); // Mês atual (-1)
console.log(now.getDate()); // Dia atual
console.log(now.getHours()); // Hora atual
console.log(now.getMinutes()); // Minuto atual
console.log(now.getSeconds()); // Segundo atual

Configurando componentes de data:

• setFullYear(year): definir o ano
• setMonth(month): definir o mês
• setDate(day): definir o dia do mês
• setHours(hours): definir as horas
• setMinutes(minutes): definir os minutos
• setSeconds(seconds): definir os segundos

Exemplo:

const date = new Date();

date.setFullYear(2025);
date.setMonth(0); // Janeiro
date.setDate(15);
date.setHours(12);
date.setMinutes(30);
date.setSeconds(45);

console.log(date.toString());

2.3 Formatação de datas

O JavaScript fornece métodos para formatar datas em uma string. O método mais popular é toLocaleDateString() para formatar a data dependendo do locale.

Exemplo de utilização do toLocaleDateString():

const now = new Date();

console.log(now.toLocaleDateString('en-US')); // "7/7/2024" (MM/DD/YYYY)
console.log(now.toLocaleDateString('en-GB')); // "07/07/2024" (DD/MM/YYYY)
console.log(now.toLocaleDateString('ru-RU')); // "07.07.2024" (DD.MM.YYYY)

Método toLocaleTimeString()

O método toLocaleTimeString() retorna a hora em formato de string localizado:

const now = new Date();

console.log(now.toLocaleTimeString('en-CA'));
console.log(now.toLocaleTimeString('en-GB'));

Método toLocaleString()

O método toLocaleString() retorna a data e a hora em formato de string localizado:

const now = new Date();

console.log(now.toLocaleString('en-CA'));
console.log(now.toLocaleString('en-GB'));

Método toISOString()

O método toISOString() retorna a data e a hora no formato ISO 8601:

const now = new Date();

console.log(now.toISOString()); // "2023-07-05T10:00:00.000Z"

2.4 Formatação de números

Método toLocaleString()

O método toLocaleString() permite formatar números de acordo com as configurações locais:

const number = 1234567.89;

console.log(number.toLocaleString()); // "1,234,567.89" no formato dos EUA ou "1 234 567,89" no formato local
console.log(number.toLocaleString('de-DE')); // "1.234.567,89" no formato da Alemanha

Formatação de números com Intl.NumberFormat

O construtor Intl.NumberFormat oferece ainda mais flexibilidade para formatar números:

const number = 1234567.89;

const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(number)); // "1,234,567.89"

const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(number)); // "1.234.567,89"

const customFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

console.log(customFormatter.format(number)); // "$1,234,567.89"