Criando uma função para recuperar a data atual no Javascript e Typescript

Publicado em: 13/06/2020

Lidar com datas no Javascript é um grande problema, por isso nós como desenvolvedores precisamos facilitar nossa vida ao máximo. Vamos criar hoje uma função que nos recuperará a data atual no formato que quisermos (traduzindo: que nós confirgurar-mos), tornando o processo extremamente reutilizável.

Iniciando

Primeiro, quero deixar uma lista de alguns posts úteis para você antes de prosseguir, com tópicos que utilizaremos:

Objetivo

Nessa função, vamos recuperar a data atual, podendo escolher um formato específico, cujo qual vamos delimitar entre 2: DD/MM/AAAA e AAAA/MM/DD (A: Ano, M: Mês e D: Dia), que são os padrões usados aqui no Brasil e em alguns outros países, respectivamente, mas fique livre pra adicionar outros do seu agrado.

Iniciando com o código

Criaremos primeiro nossa função:

  const getDateNow = (format) => {}

Aqui iniciamos a arrow function, dizemos que aceitará um parametro chamado format, que será do tipo string. Agora vamos adicionar a lógica:

  const getDateNow = (format) => {
    const date = new Date();
    const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
    const month = (date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
    const year = date.getFullYear()

    if (format && format === 'US') {
      return `${year}/${month}/${day}`
    }

    return `${day}/${month}/${year}`
  }

Vamos agora a explicação:

  • Iniciamos uma nova instância de Date em date, que nos retorna um objeto com a data atual;
  • Depois iremos pegar o valor do dia, fazendo uma correção: como os dias menores que 10 terão apenas um caractere, ex.: 5, aqui verificamos se o dia (extraído acessando o método date.getDate()) é menor que 10, caso for adicionamos um 0 na frente usando as templates strings, caso contrário apenas retornamos o valor;
  • Na próxima iremos pegar o valor do mês, e aqui temos uma "pegadinha", pois no objeto de data os meses começam a ser contados do 0, então precisamos formatar considerando isso. E então, fazemos também a correção dos valores menores que 10. No mais, o mês de Janeiro seria 0, e depois das nossas correções virará 01.
  • E finalmente pegamos o valor do ano, cujo qual não tem segredos, apenas acessamos o método date.getFullYear();

Aqui começa a parte legal: dependendo do parametro passado retornaremos valores diferentes. Aqui optei por fazer um simples IF, então caso passarmos uma string US retornamos uma template string formatada no padrão AAAA/MM/DD.

Como estamos retornando um valor, não precisaremos definir um ELSE, já que aqui, se o parametro for US a função retornará no bloco IF e desconsiderará o resto da função, e caso não for, o bloco IF é que será desconsiderado, executando então o resto da função. É como se fosse um IF/ELSE implícito, deixando assim o código mais limpo, então anota aí essa dica!

Agora apenas chamamos nossa função:

  console.log( getDateNow() ) // 13/06/2020
  console.log( getDateNow('US') ) // 2020/06/13

Bônus: Convertendo a função para Typescript

Como bônus para você leitor que acompanhou até o fim, fique com a conversão do código Javascript reescrito usando o Typescript:

const getDateNow = (format: string): string => {
  const date: Date = new Date();
  const day: string | number = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
  const month: string | number = (date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
  const year: string | number = date.getFullYear()

  if (format && format === 'US') {
    return `${year}/${month}/${day}`
  }

  return `${day}/${month}/${year}`
}

Lembrando que você poderá adicionar diferentes formatos, apenas tratando o parametro passado por você, então solte sua criatividade e até o próximo post!

# Javascript# Typescript# Tutoriais