4

Estou tentando obter a hora e o minuto local em javascript.

A primeira maneira que tentei foi essa:

date = new Date;
date.getHours() + ':' + date.getMinutes() // 10:5

Porém para o horário de 10 horas e 05 minutos, ele retornou 10:5 ao invés de 10:05.

Daí eu parti para segunda tentativa:

(new Date).toLocaleString().substr(11, 5) // 10:06

Só que minha preocupação é se o tamanho dessa string retornada por toLocaleString vai variar de acordo com a região!

A maneira com que estou obtendo horas minutos, no formato hh:mm, está boa?

Ou existe alguma maneira mais eficaz, em javascript, de obtê-los nesse formato (com zeros preenchidos) ?

6 Respostas 6

4

Eu costumo usar uma função simples para juntar o 0:

function pad(s) {
    return (s < 10) ? '0' + s : s;
}

Dessa maneira não é preciso usar o toLocaleString() que ainda é pouco suportado.

Assim faria algo como:

function novaHora() {
    function pad(s) {
        return (s < 10) ? '0' + s : s;
    }
    var date = new Date();
    return [date.getHours(), date.getMinutes()].map(pad).join(':');
}

e depois chamando a função dá a hora e minutos no formato hh:mm.

novaHora()
// "15:20"

jsFiddle: http://jsfiddle.net/jtr6062n/

1
  • 1
    Válido e organizado. Gostei da solução Commented 15/07/2015 às 13:23
1

Determinando o objeto de output (saida) da função

<div id="hora"></div>

Javascript para exibir a hora

<script>
function pad(s) { /* Completa com zeros numeros com 1 digito */
    return (s < 10) ? '0' + s : s;
}

function newData(){ /* Obter a hora e aplica ao objeto*/
 var date = new Date();
 hora.innerHTML=[date.getHours(), date.getMinutes(),date.getSeconds()].map(pad).join(':');
}

setInterval(function(){ /* Atualizar a hora em tempo real */
newData();
},500);

/* Caso não queria exibir sendo atualizando no lugar do metodo setInterval apenas instancie  a função newData();*/
</script>

Veja o exemplo aqui http://jsfiddle.net/405c7u63/

2
  • A saida será assim HH:MM:SS. Commented 16/07/2015 às 11:50
  • Apesar de a saída não estar como esperado, achei uma solução bacana! Commented 16/07/2015 às 11:53
1

Utilizando este plugin é bem simples:

/*! jquery-dateFormat 05-10-2014 */
var DateFormat={};!function(a){var b=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],f={Jan:"01",Feb:"02",Mar:"03",Apr:"04",May:"05",Jun:"06",Jul:"07",Aug:"08",Sep:"09",Oct:"10",Nov:"11",Dec:"12"},g=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.?\d{0,3}[Z\-+]?(\d{2}:?\d{2})?/;a.format=function(){function a(a){return b[parseInt(a,10)]||a}function h(a){return c[parseInt(a,10)]||a}function i(a){var b=parseInt(a,10)-1;return d[b]||a}function j(a){var b=parseInt(a,10)-1;return e[b]||a}function k(a){return f[a]||a}function l(a){var b,c,d,e,f,g=a,h="";return-1!==g.indexOf(".")&&(e=g.split("."),g=e[0],h=e[1]),f=g.split(":"),3===f.length?(b=f[0],c=f[1],d=f[2].replace(/\s.+/,"").replace(/[a-z]/gi,""),g=g.replace(/\s.+/,"").replace(/[a-z]/gi,""),{time:g,hour:b,minute:c,second:d,millis:h}):{time:"",hour:"",minute:"",second:"",millis:""}}function m(a,b){for(var c=b-String(a).length,d=0;c>d;d++)a="0"+a;return a}return{parseDate:function(a){var b={date:null,year:null,month:null,dayOfMonth:null,dayOfWeek:null,time:null};if("number"==typeof a)return this.parseDate(new Date(a));if("function"==typeof a.getFullYear)b.year=String(a.getFullYear()),b.month=String(a.getMonth()+1),b.dayOfMonth=String(a.getDate()),b.time=l(a.toTimeString()+"."+a.getMilliseconds());else if(-1!=a.search(g))values=a.split(/[T\+-]/),b.year=values[0],b.month=values[1],b.dayOfMonth=values[2],b.time=l(values[3].split(".")[0]);else switch(values=a.split(" "),6===values.length&&isNaN(values[5])&&(values[values.length]="()"),values.length){case 6:b.year=values[5],b.month=k(values[1]),b.dayOfMonth=values[2],b.time=l(values[3]);break;case 2:subValues=values[0].split("-"),b.year=subValues[0],b.month=subValues[1],b.dayOfMonth=subValues[2],b.time=l(values[1]);break;case 7:case 9:case 10:b.year=values[3],b.month=k(values[1]),b.dayOfMonth=values[2],b.time=l(values[4]);break;case 1:subValues=values[0].split(""),b.year=subValues[0]+subValues[1]+subValues[2]+subValues[3],b.month=subValues[5]+subValues[6],b.dayOfMonth=subValues[8]+subValues[9],b.time=l(subValues[13]+subValues[14]+subValues[15]+subValues[16]+subValues[17]+subValues[18]+subValues[19]+subValues[20]);break;default:return null}return b.date=new Date(b.year,b.month-1,b.dayOfMonth),b.dayOfWeek=String(b.date.getDay()),b},date:function(b,c){try{var d=this.parseDate(b);if(null===d)return b;for(var e=(d.date,d.year),f=d.month,g=d.dayOfMonth,k=d.dayOfWeek,l=d.time,n="",o="",p="",q=!1,r=0;r<c.length;r++){var s=c.charAt(r),t=c.charAt(r+1);if(q)"'"==s?(o+=""===n?"'":n,n="",q=!1):n+=s;else switch(n+=s,p="",n){case"ddd":o+=a(k),n="";break;case"dd":if("d"===t)break;o+=m(g,2),n="";break;case"d":if("d"===t)break;o+=parseInt(g,10),n="";break;case"D":g=1==g||21==g||31==g?parseInt(g,10)+"st":2==g||22==g?parseInt(g,10)+"nd":3==g||23==g?parseInt(g,10)+"rd":parseInt(g,10)+"th",o+=g,n="";break;case"MMMM":o+=j(f),n="";break;case"MMM":if("M"===t)break;o+=i(f),n="";break;case"MM":if("M"===t)break;o+=m(f,2),n="";break;case"M":if("M"===t)break;o+=parseInt(f,10),n="";break;case"y":case"yyy":if("y"===t)break;o+=n,n="";break;case"yy":if("y"===t)break;o+=String(e).slice(-2),n="";break;case"yyyy":o+=e,n="";break;case"HH":o+=m(l.hour,2),n="";break;case"H":if("H"===t)break;o+=parseInt(l.hour,10),n="";break;case"hh":hour=0===parseInt(l.hour,10)?12:l.hour<13?l.hour:l.hour-12,o+=m(hour,2),n="";break;case"h":if("h"===t)break;hour=0===parseInt(l.hour,10)?12:l.hour<13?l.hour:l.hour-12,o+=parseInt(hour,10),n="";break;case"mm":o+=m(l.minute,2),n="";break;case"m":if("m"===t)break;o+=l.minute,n="";break;case"ss":o+=m(l.second.substring(0,2),2),n="";break;case"s":if("s"===t)break;o+=l.second,n="";break;case"S":case"SS":if("S"===t)break;o+=n,n="";break;case"SSS":o+=l.millis.substring(0,3),n="";break;case"a":o+=l.hour>=12?"PM":"AM",n="";break;case"p":o+=l.hour>=12?"p.m.":"a.m.",n="";break;case"E":o+=h(k),n="";break;case"'":n="",q=!0;break;default:o+=s,n=""}}return o+=p}catch(u){return console&&console.log&&console.log(u),b}},prettyDate:function(a){var b,c,d;return("string"==typeof a||"number"==typeof a)&&(b=new Date(a)),"object"==typeof a&&(b=new Date(a.toString())),c=((new Date).getTime()-b.getTime())/1e3,d=Math.floor(c/86400),isNaN(d)||0>d?void 0:60>c?"just now":120>c?"1 minute ago":3600>c?Math.floor(c/60)+" minutes ago":7200>c?"1 hour ago":86400>c?Math.floor(c/3600)+" hours ago":1===d?"Yesterday":7>d?d+" days ago":31>d?Math.ceil(d/7)+" weeks ago":d>=31?"more than 5 weeks ago":void 0},toBrowserTimeZone:function(a,b){return this.date(new Date(a),b||"MM/dd/yyyy HH:mm:ss")}}}()}(DateFormat),function(a){a.format=DateFormat.format}(jQuery);

Utilização:

ObtenhaDataHoraAtual : function() {
    var currentdate = new Date();
    return $.format.date(currentdate, "dd/MM/yyyy HH:mm:ss");
},

FormateDataParaDiaMesAno: function(date) {
    return $.format.date(date, "dd/MM/yyyy");
},

ObtenhaDataHoraAtualSemSegundos: function () {

    var currentdate = new Date();
    return $.format.date(currentdate, "dd/MM/yyyy HH:mm");
},

 ObtenhaDataHoraMinutoSegundoAtual: function () {

    var currentdate = new Date();
    return $.format.date(currentdate, "dd/MM/yyyy HH:mm:ss");
}
2
  • +1 Apesar de ser muito código, entendo que isso sirva para formatar de qualquer jeito a data (e não somente o que eu preciso) Commented 16/07/2015 às 12:00
  • Obrigado, quis exemplificar que com o uso do plugin qualquer situação com datas fica simples de se resolver. Estou editando para remover as validações (está fora do contexto da pergunta). Commented 16/07/2015 às 12:06
1

Faça o mais simples use o método nativo Date.prototype.toLocaleTimeString() passando como parâmetro a localização, no exemplo usei pt-BR, e um objeto contendo as opções de configuração do método. Como opções use:

  • timeStyle: "short", indica que o resultado será retornado apenas em horas e minutos.
  • hour12: false, indica que o resultado independente de localização suprimirá os sufixos AM e PM e o horário entregue terá o formato de 24 horas.
  • numberingSystem: "latn" , indica que o resultado independente de localização será entregue em numerais indo-arábicos.

let date = new Date();

let time = date.toLocaleTimeString("pt-BR", {
  timeStyle: "short",       //Serão retornado apenas horas e minutos.  
  hour12: false,            //Formato de 24h, suprimindo sufixos AM e PM.
  numberingSystem: "latn"   //Resulado em algarismos indo-arábicos.
});

console.log(time);

Exemplo 2:

let date = new Date('December 17, 1995 03:04:30');

function shortTime(locale, time){
  return time.toLocaleTimeString(locale, {
    timeStyle: "short",         
    hour12: false,            
    numberingSystem: "latn"   
  });
}

console.log(shortTime('en-US', date));
console.log(shortTime('ko-KR', date));
console.log(shortTime('ar-EG', date));

1
1

Uma opção é usar o método String.prototype.padStart para tratar do zero à esquerda (mas para isso precisa transformar os valores em string antes):

function format(val) {
    return val.toString().padStart(2, '0');
}

let date = new Date('2021-04-07T01:10:30');
// 01:10
console.log(`${format(date.getHours())}:${format(date.getMinutes())}`);


Outra opção é usar o método Date.prototype.toLocaleTimeString. Sobre a sua preocupação:

string retornada por toLocaleString vai variar de acordo com a região

Basta deixar explícito qual é o locale, assim ele não varia de acordo com a região:

let date = new Date('2021-04-07T01:10:30');
// 01:10
console.log(date.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }));

Usando o locale 'pt-BR', o locale não vai mais variar (com ressalvas, leia mais abaixo). E usando as opções hour: '2-digit', minute: '2-digit', ele mostra somente as horas e minutos, já formatados com o zero à esquerda caso necessário (assim você não precisa usar substr para pegar pedaços da string).


Um porém é que nem sempre o locale pode estar disponível. Por exemplo, no Node < 13, só vinha com o locale en-US (então ao usar pt-BR, era feito o fallback para en-US). E nesse caso bastaria adicionar hour12: false nas opções, pois no locale en-US ele também mostra o identificador AM/PM (e hour12: false desabilita isso).

Outro porém é que se o código rodar em um ambiente no qual o locale pt-BR não estiver disponível e o locale default for outro diferente de en-US, pode ser que precise de outros ajustes nas opções (por exemplo, se o locale default for de países árabes, pode ser que os números sejam mostrados de maneira diferente).

Nestes casos, construir a string manualmente pode ser a melhor opção. A menos que se queira de fato um formato localizado, em vez de um fixo - ou seja, no fim é uma decisão semântica: você quer sempre HH:MM, ou quer um formato localizado que mostre somente as horas e minutos? (às vezes será a mesma coisa, às vezes não).

-3

Rogerio está no caminho certo, mas não é a forma como eu faria, eu prefiro assim:

function format(s) {
    return (s < 10) ? '0' + s : s;
}

function newData(){
 var date = new Date();
 return date.getHours() + ':' + format(date.getMinutes()) + ':' + format(date.getSeconds());
}

setInterval(function(){
//document.querySelector('#clock').text = newData();
$('#clock').text(newData());
},500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clock"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .