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!
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;
}
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.
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!
Seja o primeiro a comentar o nosso artigo!