Introdução

Entender e manipular datas em TypeScript pode ser um desafio para desenvolvedores iniciantes. Felizmente, existem funções que podem simplificar esse processo e tornar nossas vidas mais fáceis. Aqui, vamos criar uma função chamada formatDate, que transforma datas em um formato mais compreensível e consistente. Vamos explorar cada parte do código para entender como funciona e como podemos aplicá-lo em nossos projetos.

O contexto geral

Vamos dar uma olhada mais de perto na função formatDate:

// Função para formatar uma data
const formatDate = (dateString) => {
    // Criando um objeto de data a partir da string fornecida
    const dateObj = new Date(dateString)

    // Configurando as opções de formatação
    const options = {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    }

    // Formatando a data de acordo com as opções definidas
    const formattedDate = new Intl.DateTimeFormat('pt-BR', options).format(dateObj)

    // Substituindo vírgula por hífen, se necessário
    return formattedDate.replace(',', ' -')
};

1 - Criação de um objeto de data:

Primeiro, criamos um objeto de data a partir de uma string fornecida, utilizando new Date(dateString):

const dateObj = new Date('2024-05-03T15:30:00');

2 - Configuração das opções de formatação:

Definimos as opções de formatação para a data, especificando que queremos o dia, mês, ano, hora e minuto formatados como dois dígitos:

const options = {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
}

3 - Formatação da data:

Utilizamos o construtor Intl.DateTimeFormat para formatar a data de acordo com as opções definidas anteriormente e com o locale 'pt-BR' (português brasileiro):

const formattedDate = new Intl.DateTimeFormat('pt-BR', options).format(dateObj)

4 - Substituição de vírgula por hífen:

Por fim, substituímos qualquer vírgula na string formatada por um hífen, mantendo a consistência na apresentação da data:

return formattedDate.replace(',', ' -')

Conclusão:

O objeto Intl é uma ferramenta poderosa para simplificar a manipulação de datas em TypeScript. Com passos claros e exemplos práticos, espero que você se sinta mais confiante ao lidar com datas em seus projetos. Experimente incorporar essa função em suas aplicações e veja como ela pode melhorar a experiência do usuário ao apresentar datas de forma mais compreensível e consistente.