Como você exibe a data e hora do JavaScript no formato AM / PM de 12 horas?

306

Como você exibe um objeto de data e hora do JavaScript no formato de 12 horas (AM / PM)?

javascript datetime date time format bbrame
fonte
3
Não desperdice o seu tempo stackoverflow.com/a/17538193/3541385 seu funcionamento ..
Ritesh
2
@Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.Meça duas vezes, corte uma vez.
Abandoned Cart
@AbandonedCart é realmente um ditado?
gilbert-v
1
@ gilbert-v One should double-check one's measurements for accuracy before cutting a piece of wood; otherwise it may be necessary to cut again, wasting time and material.Essa pergunta provavelmente é mais bem feita no Google.
Carrinho abandonado
Eu nunca vou me acostumar com o quão complicado é tentar trabalhar com datas simples em JavaScript. Ash
ashleedawg 02/03

Respostas:

545 

function formatAMPM(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return strTime;
}

console.log(formatAMPM(new Date));
Expandir snippet

bbrame
fonte
3
Você também declarou a variável "hours" duas vezes, mas transformou "strTime" em um global acidental. Não é extremamente elegante, mas esta parece ser a técnica adequada usando métodos nativos.
Jon z
Oi, você pode me explicar o que está fazendo com isso: minutes = minutes <10? '0' + minutos: minutos;
Balz
2
@Balz Se os minutos forem menores que 10 (por exemplo, 16:04), essa instrução adiciona a string "0" para que a saída formatada seja "16:04" em vez de "16:00". Observe que, no processo, os minutos mudam de um número para uma string.
Caleb Sino
7
Eu prefiro este minutes = ('0'+minutes).slice(-2);ao invés de minutes = minutes < 10 ? '0'+minutes : minutes;
Vignesh
1
A solução @Vignesh para os minutos é melhor, porque se você estiver fazendo o sugerido 21:00:00, será 9: 000. O Vignesh's fornece os minutos corretos como: 00. Se você usasse a solução acima, também seria responsável pelo 00. (minutos> 0 e& minutos <10)? '0' + minutos: minutos;
Robbie Smith
201

Se você só quer mostrar as horas, então ..

var time = new Date();
console.log(
  time.toLocaleString('en-US', { hour: 'numeric', hour12: true })
);
Expandir snippet

Saída: 7 AM

Se você deseja mostrar os minutos também, então ...

var time = new Date();
console.log(
  time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
);
Expandir snippet

Saída: 7:23 AM

Abhay Kumar
fonte
Que horas, minutos e AM / PM?
Reutsey
3
toLocaleStringé suportado apenas no IE11 +.
21417 Neolisk
A partir de fevereiro de 2018, ele estava funcionando bem no chrome Neolisk - developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
lfender6445
deve retornar 07:23, IMO
Humble Dolt 19/11/19
@HumbleDolt Você pode estar confundindo 'numeric'com '2-digit'.
hon2a 29/01/19
55

Você também pode considerar usar algo como date.js :

<html>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>

<script>
   (function ()
   {
      document.write(new Date().toString("hh:mm tt"));
   })();
</script>
</html>
Expandir snippet

Mike Christensen
fonte
45

Aqui está uma maneira de usar o regex:

console.log(new Date('7/10/2013 20:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"))
console.log(new Date('7/10/2013 01:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"))
Expandir snippet

Isso cria 3 grupos correspondentes:

  • ([\d]+:[\d]{2}) - Hora: Minuto
  • (:[\d]{2}) - Segundos
  • (.*) - o espaço e o período (período é o nome oficial para AM / PM)

Em seguida, exibe o 1º e o 3º grupos.

AVISO: toLocaleTimeString () pode se comportar de maneira diferente com base na região / local.

Steve Tauber
fonte
3
As pessoas não usam Regex o suficiente. Isso funcionou para mim sem adicionar as sugestões da biblioteca jquery / microsoftajax acima.
Uadrive
Qual seria a regex seria ter um zero à direita no início da hora se fosse um dígito. Digamos que no seu primeiro exemplo de 20:12, seriam 20:12?
RADXack 16/05
1
@ 404 é o mesmo, ([\d]+:[\d]{2})é a parte em que estamos interessados. Use os dois pontos (:) como separador e vemos a primeira parte [\d]+. O sinal de mais significa um ou mais. Portanto, ele está procurando por um ou mais dígitos (incluindo zero. Se você tivesse que garantir que o zero estivesse lá, estaria) (0[\d]:[\d]{2}). Agora, leia: procure 0 mais um outro dígito, depois dois pontos, depois o resto.
Steve Tauber
1
console.log (new Date (). toLocaleTimeString (). replace (/ ([\ d] +: [\ d] {2}) (: [\ d] {2}) (. *) /, "$ 1 $ 3 ")); Para obter o tempo atual
mujaffars 08/03
35

Se você não precisar imprimir a am / pm, achei o seguinte agradável e conciso: 

var now = new Date();
var hours = now.getHours() % 12 || 12;  // 12h instead of 24h, with 12 instead of 0.

Isso é baseado na resposta da @ bbrame.

bandeja de ratos
fonte
3
@koolinc para meia-noite mostra 12. Não tenho certeza de qual seria o comportamento desejado.
Rattray:
Eu estou corrigido. No meu país, o relógio de 24 horas é usado, por isso não estou familiarizado com o relógio de 12 horas. Na verdade, meia-noite é 12:00.
KooiInc
16

Até onde eu sei, a melhor maneira de conseguir isso sem extensões e codificação complexa é assim:

     date.toLocaleString([], { hour12: true});

Formato AM / PM Javascript

<!DOCTYPE html>
<html>
<body>
    <p>Click the button to display the date and time as a string.</p>

    <button onclick="myFunction()">Try it</button>
    <button onclick="fullDateTime()">Try it2</button>
    <p id="demo"></p>
    <p id="demo2"></p>
    <script>
        function myFunction() {
            var d = new Date();
            var n = d.toLocaleString([], { hour: '2-digit', minute: '2-digit' });
            document.getElementById("demo").innerHTML = n;
        }
        function fullDateTime() {
            var d = new Date();          
            var n = d.toLocaleString([], { hour12: true});
            document.getElementById("demo2").innerHTML = n;
        }
    </script>
</body>
</html>
Expandir snippet

Eu encontrei isso checando esta questão.

Como uso .toLocaleTimeString () sem exibir segundos?

Edwin Mendez
fonte
12

Encontre a solução abaixo

var d = new Date();
var amOrPm = (d.getHours() < 12) ? "AM" : "PM";
var hour = (d.getHours() < 12) ? d.getHours() : d.getHours() - 12;
return   d.getDate() + ' / ' + d.getMonth() + ' / ' + d.getFullYear() + ' ' + hour + ':' + d.getMinutes() + ' ' + amOrPm;
Krishnamoorthy Acharya
fonte
Deve ser menor ou igual ao cálculo da hora, caso contrário o meio-dia seja exibido como 0. Então: var hour = (d.getHours () <= 12). Ainda tem problema com a meia-noite, então você deve verificar se zero e definir também 12.
18719 Ryan
11

usar dateObj.toLocaleString([locales[, options]])

Opção 1 - Usando localidades

var date = new Date();
console.log(date.toLocaleString('en-US'));

Opção 2 - Usando opções

var options = { hour12: true };
console.log(date.toLocaleString('en-GB', options));

Nota: suportado em todos os navegadores, exceto no Safari

LiranBo
fonte
1
developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
mimo 6/16
9

RegExp curto para en-US:

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"
Geo
fonte
este trabalho Indiferente sobre as últimas navegadores Safari e Firefox, o tempo ainda usa formato de 24 horas
euther
1
as respostas ficam desatualizadas com o passar do tempo. Sinta-se livre para editar e atualizar!
Geo
Isso realmente fará com que a string pareça 1:54 PM CDT. Para remover o CDTalter your regex para o seguinte .replace(/:\d+ |\CDT/g, ' '). Embora CDT seja apenas o meu fuso horário. Se você tiver um fuso horário diferente, suponho que você precisaria mudar para esse código de zona.
Sadmicrowave
A saída de toLocaleTimeString depende da implementação, portanto não é confiável o mesmo formato em todos os lugares.
RobG
9

Nos navegadores modernos, use Intl.DateTimeFormate force o formato de 12 horas com as opções:

    let now = new Date();

    new Intl.DateTimeFormat('default',
        {
            hour12: true,
            hour: 'numeric',
            minute: 'numeric'
        }).format(now);

    // 6:30 AM

O uso defaultrespeitará a localidade padrão do navegador se você adicionar mais opções, mas ainda assim produzirá o formato de 12 horas.

mtm
fonte
Para usar isso, atribua a nova string a uma variável, por exemplo: let result = new Intl.DateTi .... alert (result);
Scot Nery
7

Use Moment.js para isso

Use os códigos abaixo em JavaScript ao usar moment.js

H, HH       24 hour time
h, or hh    12 hour time (use in conjunction with a or A)

O format()método retorna a data em formato específico.

moment(new Date()).format("YYYY-MM-DD HH:mm"); // 24H clock
moment(new Date()).format("YYYY-MM-DD hh:mm A"); // 12H clock (AM/PM)
moment(new Date()).format("YYYY-MM-DD hh:mm a"); // 12H clock (am/pm)
Ankur Mahajan
fonte
5

Confira o Datejs . Os formatadores incorporados podem fazer isso: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

É uma biblioteca realmente útil, especialmente se você planeja fazer outras coisas com objetos de data.

Chris Laplante
fonte
Respostas como " usar a biblioteca X " não são úteis. Eles podem ser bons como comentários.
RobG
1
@ RobG: Como você pode ver, já faz um bom tempo desde que escrevi esta resposta. Eu percebo isso agora.
Chris Laplante
4

Acho que aqui está funcionando bem.

var date_format = '12'; /* FORMAT CAN BE 12 hour (12) OR 24 hour (24)*/


var d       = new Date();
var hour    = d.getHours();  /* Returns the hour (from 0-23) */
var minutes     = d.getMinutes();  /* Returns the minutes (from 0-59) */
var result  = hour;
var ext     = '';

if(date_format == '12'){
    if(hour > 12){
        ext = 'PM';
        hour = (hour - 12);

        if(hour < 10){
            result = "0" + hour;
        }else if(hour == 12){
            hour = "00";
            ext = 'AM';
        }
    }
    else if(hour < 12){
        result = ((hour < 10) ? "0" + hour : hour);
        ext = 'AM';
    }else if(hour == 12){
        ext = 'PM';
    }
}

if(minutes < 10){
    minutes = "0" + minutes; 
}

result = result + ":" + minutes + ' ' + ext; 

console.log(result);

e exemplo mais descarado aqui

vamsikrishnamannem
fonte
4 
<script>
var todayDate = new Date();
var getTodayDate = todayDate.getDate();
var getTodayMonth =  todayDate.getMonth()+1;
var getTodayFullYear = todayDate.getFullYear();
var getCurrentHours = todayDate.getHours();
var getCurrentMinutes = todayDate.getMinutes();
var getCurrentAmPm = getCurrentHours >= 12 ? 'PM' : 'AM';
getCurrentHours = getCurrentHours % 12;
getCurrentHours = getCurrentHours ? getCurrentHours : 12; 
getCurrentMinutes = getCurrentMinutes < 10 ? '0'+getCurrentMinutes : getCurrentMinutes;
var getCurrentDateTime = getTodayDate + '-' + getTodayMonth + '-' + getTodayFullYear + ' ' + getCurrentHours + ':' + getCurrentMinutes + ' ' + getCurrentAmPm;
alert(getCurrentDateTime);
</script>
Pankaj Upadhyay
fonte
2
Obter o módulo da hora com 12 é excelente! Isto evita ficando zero quando é que é 12:00 12:00 ou
LynNell Emmanuel Neri
3

Aqui está outra maneira simples e muito eficaz:

        var d = new Date();

        var weekday = new Array(7);
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        var month = new Array(11);
        month[0] = "January";
        month[1] = "February";
        month[2] = "March";
        month[3] = "April";
        month[4] = "May";
        month[5] = "June";
        month[6] = "July";
        month[7] = "August";
        month[8] = "September";
        month[9] = "October";
        month[10] = "November";
        month[11] = "December";

        var t = d.toLocaleTimeString().replace(/:\d+ /, ' ');

        document.write(weekday[d.getDay()] + ',' + " " + month[d.getMonth()] + " " + d.getDate() + ',' + " " + d.getFullYear() + '<br>' + d.toLocaleTimeString());

    </script></div><!-- #time -->
user3059774
fonte
1

você pode determinar am ou pm com esse código simples

var today=new Date();
var noon=new Date(today.getFullYear(),today.getMonth(),today.getDate(),12,0,0);
var ampm = (today.getTime()<noon.getTime())?'am':'pm';
sarkiroka
fonte
0 

var d = new Date();
var hours = d.getHours() % 12;
  hours = hours ? hours : 12;
    var test = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][(d.getMonth() + 1)] + " " + 
    ("00" + d.getDate()).slice(-2) + " " + 
    d.getFullYear() + " " + 
    ("00" + hours).slice(-2) + ":" + 
    ("00" + d.getMinutes()).slice(-2) + ":" + 
    ("00" + d.getSeconds()).slice(-2) + ' ' + (d.getHours() >= 12 ? 'PM' : 'AM'); 
    
document.getElementById("demo").innerHTML = test;
<p id="demo" ></p>
Expandir snippet

Sujith S
fonte
0 
<h1 id="clock_display" class="text-center" style="font-size:40px; color:#ffffff">[CLOCK TIME DISPLAYS HERE]</h1>



<script>
            var AM_or_PM = "AM";

            function startTime(){

                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();

                h = twelve_hour_time(h);
                m = checkTime(m);
                s = checkTime(s);



                document.getElementById('clock_display').innerHTML =
                    h + ":" + m + ":" + s +" "+AM_or_PM;
                var t = setTimeout(startTime, 1000);

            }

            function checkTime(i){

                if(i < 10){
                    i = "0" + i;// add zero in front of numbers < 10
                }
                return i;
            }

            // CONVERT TO 12 HOUR TIME. SET AM OR PM
            function twelve_hour_time(h){

                if(h > 12){
                    h = h - 12;
                    AM_or_PM = " PM";
                }
                return h;

            }

            startTime();

        </script>
Stnfordly
fonte
0 
function getDateTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();

  if (month.toString().length == 1) {
    month = '0' + month;
  }
  if (day.toString().length == 1) {
    day = '0' + day;
  }

  var hours = now.getHours();
  var minutes = now.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var timewithampm = hours + ':' + minutes + ' ' + ampm;

  var dateTime = monthNames[parseInt(month) - 1] + ' ' + day + ' ' + year + ' ' + timewithampm;
  return dateTime;
}
Vik2696
fonte
0

Aqui minha solução

function getTime() {
var systemDate = new Date();
var hours = systemDate.getHours();
var minutes = systemDate.getMinutes();
var strampm;
if (hours >= 12) {
    strampm= "PM";
} else {
    strampm= "AM";
}
hours = hours % 12;
if (hours == 0) {
    hours = 12;
}
_hours = checkTimeAddZero(hours);
_minutes = checkTimeAddZero(minutes);
console.log(_hours + ":" + _minutes + " " + strampm);
}

function checkTimeAddZero(i) {
if (i < 10) {
    i = "0" + i
}
return i;
}
Prathamesh Mais
fonte
-1

Ou simplesmente faça o seguinte código:

    <script>
        time = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('txt_clock').innerHTML = h + ":" + m + ":" + s;     
            var t = setTimeout(function(){time()}, 0);
        }

        time2 = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            if (h>12) {
                document.getElementById('txt_clock_stan').innerHTML = h-12 + ":" + m + ":" + s;
            }               
            var t = setTimeout(function(){time2()}, 0);
        }

        time3 = function() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            if (h>12) {
                document.getElementById('hour_line').style.width = h-12 + 'em'; 
            }
            document.getElementById('minute_line').style.width = m + 'em';  
            document.getElementById('second_line').style.width = s + 'em';  
            var t = setTimeout(function(){time3()}, 0);
        }

        checkTime = function(i) {
            if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
            return i;
        }           
    </script>

Zyan Jacob
fonte
-1

Uma implementação curta e agradável:

// returns date object in 12hr (AM/PM) format
var formatAMPM = function formatAMPM(d) {
    var h = d.getHours();
    return (h % 12 || 12)
        + ':' + d.getMinutes().toString().padStart(2, '0')
        + ' ' + (h < 12 ? 'A' : 'P') + 'M';
};
johnchinjew
fonte
-1

tente isso

      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var ampm = hours >= 12 ? "pm" : "am";
Md Juyel Rana
fonte
Isto está incorreto. As horas podem ser maiores que 12.
Utsav T
Quando as 12.00 horas, a var ampm será "pm". Portanto, das 12h às 23h, as horas serão de 12 a 23 que armazenam o valor "pm" e, para outros, var ampm armazenará o valor "am". Eu espero que você entenda.
Md Juyel Rana 14/04
Oi Juyel! De fato, quando as horas são maiores que 12, o valor seria PM. Mas a pergunta é "Como você exibe a data e hora do JavaScript no formato AM / PM de 12 horas?" - você precisa ajudar o OP a converter o tempo todo para o formato AM / PM. Por exemplo, 14:30 seria 14:30.
Utsav T