AndersonArruda

Artigos de tecnologia ao alcance de um clique!


Formatando data com JavaScript
formatando data javascript toLocaleString

Formatando data com JavaScript

21/06/2022 10:51

Hoje estou compartilhando um código que desenvolvi e adicionei aos utilitários de JavaScript da minha empresa!


Convertendo formato de data para strings de determinados países.

Segue o link do github para acessarem e utilizarem, sintam-se a vontade!


Download no Github


Nesse tutorial estarei dando uma breve explicação de como fiz o código e como utilizá-lo.

Utilizei os recursos do JavaScript toLocaleString, segue o manual de referência:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

Vamos ao código:


/**
* en-US: Convert a timestamp to a locale DateTime String
* pt-BR: Converte um timestamp para uma String DateTime local
*
* @example
* tz_to_locale('2021-01-25'); // 25/01/2021
* tz_to_locale('2021-01-25 01:33:54'); // 25/01/2021 01:33:54
* tz_to_locale('2021-01-25 01:45:46', 'short'); // 25/01/2021
* tz_to_locale('2021-01-25 01:45:46', 'full'); // segunda-feira, 25 de janeiro de 2021
* tz_to_locale('2021-01-25 01:45:46', 'long'); // 25 de janeiro de 2021
* tz_to_locale('2021-01-25 01:45:46', 'medium'); // 25 de jan. de 2021
* tz_to_locale('2021-01-25 01:33:54', 'no-style', 'en-US'); // 1/25/2021, 1:33:54 AM
* @author Anderson Matheus Arruda < anderson at sysborg dot com dot br >
* @param {String} required Timestamp ISO8601
* @param {String} [optional] Accept only ['no-style', 'short', 'medium', 'full', 'long']
* @returns {String} [optional] Accept only JavaScript locales like 'pt-BR, en-US, pt-PT and all others see javascript documentation'
*/

function tz_to_locale(tz, style='', locale='pt-BR'){
  try{
    if(tz.length == 10 && /[0-9]{4}\-[0-9]{2}\-[0-9]{2}/g.test(tz)){
      style = (style == '') ? 'short' : style;    
      return (style=='no-style') ? (new Date(tz+'T00:00:00')).toLocaleString(locale) : (new Date(tz+'T00:00:00')).toLocaleString(locale, {'dateStyle': style});
    } else{  
      let istz = tz.match(/([0-9]{4}\-[0-9]{2}\-[0-9]{2}\s[0-9]{2}:[0-9]{2}:[0-9]{2})|([0-9]{4}\-[0-9]{2}\-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2})/g);
      if(istz != null){
        style = (style == '') ? 'no-style' : style;
        return (style=='no-style') ? (new Date(istz)).toLocaleString(locale) : (new Date(istz)).toLocaleString(locale, {'dateStyle': style});
      }
    }
  } catch(err){
    console.log(err);        
    return tz;       
  }
  return tz;          
}

Resumo do conceito geral:

Coloco o código em try catch para evitar possíveis erros já que ainda não terminei por completo o regex que determina se é uma data válida ou não!

Caso de erro ele retorna o valor da entrada!


Linha 19: verifica se a string é somente uma data válida e sem horário. "O regex será aprimorado!"

Linha 20: verifica se o dateStyle foi determinado, caso não tenha sido retorna o estilo short! "// dd/mm/YYYY para o locale pt-BR"

Linha 21: verifica se foi pedido no-style para o dateStyle, se sim retorna o toLocaleString da localidade escolhida pelo parâmetro locale "linha 17" se não retorna o toLocaleString com a localidade escolhida e o dateStyle escolhido.

Linha 22: se não se tratar de uma data mas sim de uma data com horário.

Linha 23: localiza o padrão esperado do Date e remove milisegundos ou outras informações subsequentes.

Linha 24: retorna se o regex do match retornou o timestamp esperado. "ainda será aprimorado o regex para garantir maior segurança no tratamento dos dados!"

Linha 25: determina se algum dateStyle foi setado caso não tenha sido setado o padrão será sem style.

Linha 26: verifica se foi pedido no-style para o dateStyle, se sim retorna o toLocaleString da localidade escolhida pelo parâmetro locale "linha 17" se não retorna o toLocaleString com a localidade escolhida e o dateStyle escolhido.

Linha 34: se nenhuma das condições forem atendidas a função retornará a própria entrada.

Essa é a idéia geral do projeto, auxiliar e facilitar a mudança de data e hora pra estilos de determinados países.


Exemplo de como utilizar:

Para utilizar é muito simples:

console.log(tz_to_locale('2021-01-25', 'short', 'pt-BR')); // 25/01/2021

console.log(tz_to_locale('2021-01-25')); //25/01/2021

console.log(tz_to_locale('2021-01-25 11:36:33')); //25/01/2021 11:36:33

console.log(tz_to_locale('2021-01-25 01:33:54', 'no-style', 'en-US')); //1/25/2021 1:33:54 AM


Até a próxima dica de JavaScript!

Espaço para publicidade
0 Comentário(s)
Seja o primeiro a comentar o nosso artigo!
Todos os direitos reservados. © 2021-2031
SBBlog Powered By Powered By Sysborg | Powered By Anderson Arruda