¿Cómo mostrar la fecha y hora de JavaScript en formato de 12 horas AM / PM?

306

¿Cómo mostrar un objeto de fecha y hora de JavaScript en el formato de 12 horas (AM / PM)?

javascript datetime date time format bbrame
fuente
3
No pierdas tu tiempo stackoverflow.com/a/17538193/3541385 está funcionando ..
Ritesh
2
@Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.Mide dos veces, corta una vez.
Carrito abandonado
@AbandonedCart, ¿eso es realmente un dicho?
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.Sin embargo, esa pregunta probablemente se haga mejor en Google.
Carro abandonado
Yo nunca se acostumbraría a la forma maldita enrevesado que está tratando de trabajo con fechas simples en JavaScript. 😠
ashleedawg

Respuestas:

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 fragmento

bbrame
fuente
3
También declaró la variable "horas" dos veces, pero convirtió "strTime" en un elemento global accidental. No es extremadamente elegante, pero esta parece ser la técnica adecuada utilizando métodos nativos.
Jon z
Hola, ¿puedes explicarme qué haces con esto: minutos = minutos <10? '0' + minutos: minutos;
Balz
2
@Balz Si los minutos son menos de 10 (por ejemplo, 16:04), entonces esa declaración agrega la cadena "0" para que la salida formateada sea "4:04 PM" en lugar de "4: 4 PM". Tenga en cuenta que en el proceso, los minutos cambian de un Número a una Cadena.
Caleb Bell
77
Prefiero esto en minutes = ('0'+minutes).slice(-2);lugar de minutes = minutes < 10 ? '0'+minutes : minutes;
Vignesh
1
La solución @Vignesh para los minutos es mejor porque si está haciendo lo sugerido 21:00:00 se convierte en 9: 000. Vignesh te da los minutos correctos como: 00. Si usara la solución anterior, entonces también tendría que tener en cuenta el 00. (minutos> 0 && minutos <10)? '0' + minutos: minutos;
Robbie Smith
201

Si solo quieres mostrar las horas, entonces ...

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

Salida: 7 AM

Si deseas mostrar los minutos también ...

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

Salida: 7:23 AM

Abhay Kumar
fuente
¿Qué pasa con la hora, minutos y AM / PM?
reutsey
3
toLocaleStringsolo es compatible con IE11 +.
Neolisk
A partir de febrero de 2018, funciona bien en Chrome Neolisk - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lfender6445
debería regresar 07:23, IMO
Humble Dolt
@HumbleDolt Puede ser confuso 'numeric'con '2-digit'.
hon2a
55

También puede 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 fragmento

Mike Christensen
fuente
45

Aquí hay una manera de usar 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 fragmento

Esto crea 3 grupos coincidentes:

  • ([\d]+:[\d]{2}) - Hora: minuto
  • (:[\d]{2}) - Segundos
  • (.*) - el espacio y el período (Período es el nombre oficial de AM / PM)

Luego muestra los grupos primero y tercero.

ADVERTENCIA: toLocaleTimeString () puede comportarse de manera diferente según la región / ubicación.

Steve Tauber
fuente
3
La gente no usa Regex lo suficiente. Esto funcionó para mí sin agregar las sugerencias de la biblioteca jquery / microsoftajax anteriores.
Uadrive
Lo que sería la expresión regular sería tener un cero al comienzo de la hora si fuera un solo dígito. ¿Diga en su primer ejemplo de 8:12 PM que sería 08:12 PM?
RADXack
1
@ 404 es lo mismo, ([\d]+:[\d]{2})es la parte que nos interesa. Use los dos puntos (:) como separador y vemos que la primera parte es [\d]+. El plus significa uno o más. Por lo tanto, está buscando uno o más dígitos (incluido cero. Si tuviera que garantizar que hay un cero, sería (0[\d]:[\d]{2}). Esto ahora se lee, busque 0 más otro dígito, luego dos puntos, luego el resto.
Steve Tauber
1
console.log (new Date (). toLocaleTimeString (). replace (/ ([\ d] +: [\ d] {2}) (: [\ d] {2}) (. *) /, "$ 1 $ 3 ")); Para obtener la hora actual
mujaffars
35

Si no necesita imprimir am / pm, encontré lo siguiente agradable y conciso: 

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

Esto se basa en la respuesta de @ bbrame.

rattray
fuente
3
@koolinc para la medianoche muestra 12. No estoy seguro de cuál sería el comportamiento deseado.
Rattray
Estoy corregido. En mi país se usa el reloj de 24 horas, así que no estoy tan familiarizado con el reloj de 12 horas. De hecho, la medianoche son las 12:00 a.m.
KooiInc
16

Hasta donde yo sé, la mejor manera de lograr eso sin extensiones y codificación compleja es así:

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

Formato Javascript AM / PM

<!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 fragmento

Encontré esto revisando esta pregunta.

¿Cómo uso .toLocaleTimeString () sin mostrar segundos?

Edwin Mendez
fuente
12

Encuentra la solución a continuación

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
fuente
Debería ser menor o igual que para el cálculo de la hora; de lo contrario, el mediodía se muestra como 0. Entonces: var hora = (d.getHours () <= 12). Todavía tiene problemas con la medianoche, por lo que debe verificar si es cero y luego establecerlo en 12 también.
Ryan
11

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

Opción 1 : uso de configuraciones regionales

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

Opción 2 : uso de opciones

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

Nota: compatible con todos los navegadores pero con cajero automático Safari

LiranBo
fuente
1
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
mimo
9

RegExp corto para en-US:

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"
Geo
fuente
esto no funciona en los últimos navegadores safari y firefox, el tiempo todavía usa el formato de 24 horas
hasta el
1
las respuestas se vuelven obsoletas a medida que pasa el tiempo. ¡Siéntase libre de editar y actualizar!
Geo
Esto realmente hará que la cadena se vea como 1:54 PM CDT. Para eliminar la CDTalteración de su expresión regular a lo siguiente .replace(/:\d+ |\CDT/g, ' '). Aunque, CDT es solo mi zona horaria. Si tiene una zona horaria diferente, supongo que necesitaría cambiar a ese código de zona.
sadmicrowave
La salida de toLocaleTimeString depende de la implementación, por lo que no es confiablemente el mismo formato en todas partes.
RobG
9

En los navegadores modernos, use Intl.DateTimeFormaty fuerce el formato de 12 horas con opciones:

    let now = new Date();

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

    // 6:30 AM

El uso defaultrespetará la configuración regional predeterminada del navegador si agrega más opciones, pero aún generará el formato de 12 horas.

mtm
fuente
para usar esto, asigne la nueva cadena a una variable, por ejemplo: let result = new Intl.DateTi .... alert (result);
Scot Nery
7

Use Moment.js para esto

Use los siguientes códigos en JavaScript cuando use moment.js

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

El format()método devuelve la fecha en 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
fuente
5

Echa un vistazo a Datejs . Sus formateadores integrados pueden hacer esto: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

Es una biblioteca realmente útil, especialmente si está planeando hacer otras cosas con objetos de fecha.

Chris Laplante
fuente
Respuestas como " usar la biblioteca X " no son útiles. Sin embargo, pueden ser buenos como comentarios.
RobG
1
@RobG: Como puede ver, ha pasado bastante tiempo desde que escribí esta respuesta. Me doy cuenta de esto ahora.
Chris Laplante
4

Me parece que está aquí , funciona bien.

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);

y ejemplo de plunker aquí

vamsikrishnamannem
fuente
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
fuente
2
¡Obtener el módulo de la hora con 12 es excelente! Esto evita llegar a cero cuando son las
12 a.m.
3

Aquí hay otra manera que es simple y muy efectiva:

        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 -->
usuario3059774
fuente
1

puedes determinar am o pm con este código simple

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
fuente
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 fragmento

Sujith S
fuente
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
fuente
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
fuente
0

Aquí mi solución

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 Más
fuente
-1

O simplemente haz el siguiente 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
fuente
-1

Una implementación corta y dulce:

// 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
fuente
-1

prueba esto

      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
fuente
Esto es incorrecto. Las horas podrían ser mayores que 12.
Utsav T
Cuando las 12.00 pm la var ampm será "pm". Entonces, las 12.00 PM a las 11.00 PM horas serán de 12 a 23 que almacenan el valor "pm" y para otros, var ampm almacenará el valor "am". Espero que entiendas.
Md Juyel Rana
Hola juyel De hecho, cuando las horas son superiores a 12, el valor sería PM. Pero la pregunta es "¿Cómo mostrar la fecha y hora de JavaScript en formato de 12 horas AM / PM?" - necesita ayudar a OP a convertir todo el tiempo al formato AM / PM. Por ejemplo, las 14:30 serían las 2:30 PM.
Utsav T