Como uso .toLocaleTimeString () sem exibir segundos?


162

Atualmente, estou tentando exibir a hora do usuário sem exibir os segundos. Existe uma maneira de fazer isso usando .toLocaleTimeString () do Javascript?

Fazendo algo parecido com isto:

var date = new Date();
var string = date.toLocaleTimeString();

exibirá a hora do usuário em todas as unidades, por exemplo, atualmente, exibe 15:39:15. Posso exibir a mesma string, apenas sem os segundos? (por exemplo, 15:39)

Respostas:


316

Você sempre pode definir as opções, com base nesta página , para se livrar dos segundos, algo como isto

var dateWithouthSecond = new Date();
dateWithouthSecond.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});

Suportado pelo Firefox, Chrome, IE9 + e Opera. Experimente no console do seu navegador.


2
Obrigado, eu estava procurando por horas para esta resposta.
MustafaP

5
FYI hour: "2-digit"não está trabalhando para mim no Chrome 42 nem FF 37 --- d = new Date(1429524912495).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: true})retorna "6:15 AM"em ambos.
usar o seguinte comando

16
use []para deixar de fora uma localidade específica. Dessa forma, você fica na localidade dos usuários:toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}
Hafenkranich 05/07/2015

12
funciona no chrome 51:new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false}); "17:08"
rofrol 02/06

1
Sim, faz 4 anos desde que publiquei isso aqui, muitas coisas mudaram. Não é de admirar que você não precise mais especificá-lo. Saudações
CJLopez

10

Isso funciona para mim:

var date = new Date();
var string = date.toLocaleTimeString([], {timeStyle: 'short'});

6
Vale ressaltar que, em março de 2020, a opção timeStyle é suportada apenas no Chrome e Opera , e não no Firefox, Edge / IE e Safari. Se você deseja uma cobertura ampla, provavelmente é melhor seguir as opções de hora e minuto por enquanto.
buckthorn

Para o Safari / iOS, isso funciona apenas nos EUA onde você tem AM / PM. en-US exibirá 15:16, outros locais exibirão 15:16:00.
PassKit

8

O valor retornado por Date.prototype.toLocaleString depende da implementação, para que você obtenha o que obtém. Você pode tentar analisar a sequência para remover segundos, mas pode ser diferente em navegadores diferentes, portanto, você deve conceder permissão para todos os navegadores em uso.

Criar seu próprio formato inequívoco não é difícil usando os métodos Date. Por exemplo:

function formatTimeHHMMA(d) {
  function z(n){return (n<10?'0':'')+n}
  var h = d.getHours();
  return (h%12 || 12) + ':' + z(d.getMinutes()) + ' ' + (h<12? 'AM' :'PM');
}

7
NÃO analise a sequência retornada de toLocaleTimeString. Eu estava há alguns anos sem nenhum problema. Mas hoje eu notei que não estava funcionando. Acontece que existem caracteres unicode especiais (por exemplo, 0x200E, uma marca da esquerda para a direita) que não podem ser processados ​​pelo Date.parse. Nunca vi isso chegando. Então, eu vou parar de usar todas as funções de localidade e apenas construir minhas próprias seqüências de caracteres formatadas em tempo. Isso vai me salvar de surpresas ruins como esta.
Gabe Halsmer

@ GabeHalsmer - eu não recomendo, e nunca recomendo, permitir que o Date.parse analise as strings (por exemplo, o último parágrafo aqui ). Mas isso é irrelevante aqui, não é mencionado, você não entendeu a resposta se acha que sim (por exemplo, " Você pode tentar analisar ...").
RobG

Belo link. Portanto, em resumo, as pessoas devem fazer sua própria análise ou seu próprio método ToString, porque fundamentalmente Date.prototype.toLocalString e Date.parse são incompatíveis. Fazer um ToString parecia a coisa mais fácil para mim. Mas você implementou sua própria análise. Então, qualquer um funcionará para as pessoas. O essencial que eu queria que todos soubessem era que o Date.parse não funciona com o toLocaleString. E levei horas para localizar essa incompatibilidade por causa de como era sutil. As marcas da esquerda para a direita são invisíveis no depurador do Visual Studio.
Gabe Halsmer

Legal, outro voto totalmente equivocado. Não é à toa que as pessoas não querem colocar seus nomes nelas.
RobG

Para armazenamento e transporte de datas para outros formatos, toISOString e getTime provavelmente fornecem o formato de data mais seguro para a nova correção. Não estou ciente de nenhuma implementação de JS na última década que não lide com a versão em milissegundos do UTC retornada de getTime e os valores ISO também estão nas especificações como um formato de data analisável por um tempo muito longo. Mas nunca leia datas anteriores dos elementos da interface do usuário. Isso deve vir da sua camada de aplicativo. E sempre teste no Safari. Eles foram idiotas no nível IE6 sobre o objeto date.
Erik Reppen

7

Com localidades:

var date = new Date();
date.toLocaleTimeString('fr-FR', {hour: '2-digit', minute: '2-digit'})

0

Eu também tenho procurado solução para este problema, eis o que eu acabei inventando:

function getTimeStr() {
    var dt = new Date();
    var d = dt.toLocaleDateString();
    var t = dt.toLocaleTimeString();
    t = t.replace(/\u200E/g, '');
    t = t.replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');
    var result = d + ' ' + t;
    return result;
}

Você pode experimentá-lo aqui: http://jsfiddle.net/B5Zrx/

\ u200E é um caractere de formatação que eu já vi em alguma versão do IE (marca unicode da esquerda para a direita).

Suponho que se o horário formatado contiver algo como "XX: XX: XX", deve ser o tempo com segundos e removo a última parte; se não encontrar esse padrão, nada será alterado. Bastante seguro, mas existe o risco de deixar segundos em algumas circunstâncias estranhas.

Eu só espero que não haja um código de idioma que mude a ordem das partes do tempo formatadas (por exemplo, torne ss: mm: hh). Essa marca da esquerda para a direita está me deixando um pouco nervoso com isso, é por isso que não removo a marca da direita para a esquerda (\ u202E) - prefiro não encontrar uma correspondência nesse caso e deixar o hora formatada com segundos nesse caso.


1
+1 Você é o único que respondeu à pergunta corretamente. Obrigado mate
mate64

1
Isso faz muitas suposições sobre os toLocaleTimeString()retornos que podem não ser verdadeiros para todos os locais.
AJ Richardson

0

Você pode tentar isso, que está funcionando para minhas necessidades.

var d = new Date();
d.toLocaleTimeString().replace(/:\d{2}\s/,' ');

ou

d.toLocaleString().replace(/:\d{2}\s/,' ');

6
Isso não funcionará porque outros idiomas podem usar um separador totalmente diferente :.
quer

-2

Aqui está uma função que fará isso, com comentários que explicam:

  function displayNiceTime(date){
    // getHours returns the hours in local time zone from 0 to 23
    var hours = date.getHours()
    // getMinutes returns the minutes in local time zone from 0 to 59
    var minutes =  date.getMinutes()
    var meridiem = " AM"

    // convert to 12-hour time format
    if (hours > 12) {
      hours = hours - 12
      meridiem = ' PM'
    }
    else if (hours === 0){
      hours = 12
    }

    // minutes should always be two digits long
    if (minutes < 10) {
      minutes = "0" + minutes.toString()
    }
    return hours + ':' + minutes + meridiem
  }

Como, como outros observaram, o toLocaleTimeString () pode ser implementado de maneira diferente em diferentes navegadores, dessa forma, oferece melhor controle.

Para saber mais sobre o objeto Data Javascript, este é um bom recurso: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date


-2

Eu acho que a pergunta original pode ser facilmente respondida com algo que está sendo esquecido até agora: uma simples divisão de string. O tempo retornado é uma sequência de texto, basta dividi-la no delimitador ":" e remontar a sequência da maneira que desejar. Sem plug-ins, sem scripts complicados. e aqui vai você:

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {
    var d = new Date();
    currentNow = d.toLocaleTimeString();
    nowArray = currentNow.split(':');
    filteredNow = nowArray[0]+':'+nowArray[1];
    document.getElementById("demo").innerHTML = filteredNow;
}

-3

Embora essa seja uma pergunta mais antiga, eu tinha a mesma pergunta recentemente e criei uma solução mais simples usando expressões regulares e a função de substituição de cadeia de caracteres como outra alternativa (não há necessidade de bibliotecas js externas ou dependência da API de internalização do ECMAScript) :

var d = new Date();
var localeTime = d.toLocaleTimeString();
var localeTimeSansSeconds = localeTime.replace(/:(\d{2}) (?=[AP]M)/, " ");

Essa abordagem usa uma regex antecipada para capturar a extremidade: ss AM / PM da sequência e substitui a parte: ss por um espaço, retornando o restante da sequência intocado. (Literalmente, diz "Encontre dois pontos com dois dígitos e um espaço seguido de AM ou PM e substitua os dois pontos, dois dígitos e a parte do espaço por apenas um espaço).

Essa expressão / abordagem funciona apenas para localidades en-US e en-US-like. Se você também deseja um resultado semelhante com, por exemplo, inglês britânico (en-GB), que não usa AM / PM, é necessária uma expressão regular diferente.

Com base no exemplo de amostra do questionador original, suponho que eles estavam lidando principalmente com o público americano e o esquema de tempo nos EUA.


-3

Simplesmente converta a data em uma sequência e concatene as substrings que deseja dela.

let time = date.toLocaleTimeString();
console.log(time.substr(0, 4) + time.substr(7, 3))
//=> 5:45 PM

3
Por favor, adicione algumas explicações ao seu post.
DigitCart

5
toLocaleTimeStringretorna uma string diferente em cada navegador, dependendo das configurações de localidade. Você não pode confiar nessas posições; obterá resultados diferentes, provavelmente quebrados, nos navegadores de outras pessoas.
oriadam 15/03
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.