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


162

Actualmente intento mostrar la hora del usuario sin mostrar los segundos. ¿Hay alguna manera de hacer esto usando .toLocaleTimeString () de Javascript?

Haciendo algo como esto:

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

mostrará la hora del usuario con cada unidad, por ejemplo, actualmente muestra 3:39:15 PM. ¿Puedo mostrar esa misma cadena, solo sin los segundos? (por ejemplo, 3:39 PM)

Respuestas:


316

Siempre puede configurar las opciones, en función de esta página que puede configurar, para deshacerse de los segundos, algo como esto

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

Compatible con Firefox, Chrome, IE9 + y Opera. Pruébelo en la consola de su navegador web.


2
Gracias, estuve buscando durante horas esta respuesta.
MustafaP

55
FYI hour: "2-digit"no funciona para mí en Chrome 42 ni FF 37 --- d = new Date(1429524912495).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: true})regresa "6:15 AM"en ambos.
user9645

16
se usa []para omitir un entorno local específico. De esa manera, usted permanece en la configuración regional de los usuarios:toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}
Hafenkranich

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

1
Sí, han pasado 4 años desde que publiqué esto aquí, muchas cosas han cambiado. No es de extrañar que ya no necesite especificarlo. Saludos
CJLopez

10

Esto funciona para mi:

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


66
Vale la pena señalar que, a partir de marzo de 2020, la opción timeStyle solo es compatible en Chrome y Opera , y no en Firefox, Edge / IE y Safari. Si desea una cobertura amplia, probablemente sea mejor quedarse con las opciones de hora y minutos por ahora.
espino

Para Safari / iOS, esto solo funciona en los EE. UU. Donde tiene AM / PM. en-US mostrará las 3:16 PM, otras configuraciones regionales mostrarán las 15:16:00.
PassKit

8

El valor devuelto por Date.prototype.toLocaleString depende de la implementación, por lo que obtienes lo que obtienes. Puede intentar analizar la cadena para eliminar segundos, pero puede ser diferente en diferentes navegadores, por lo que deberá tener en cuenta cada navegador en uso.

Crear su propio formato inequívoco no es difícil con los métodos de fecha. Por ejemplo:

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

77
NO analice la cadena devuelta de toLocaleTimeString. Llevaba unos años sin ningún problema. Pero hoy me di cuenta de que no estaba funcionando. Resulta que hay caracteres unicode especiales (por ejemplo, 0x200E, una marca de izquierda a derecha) que Date.parse no puede procesar. Nunca vi eso venir. Así que voy a dejar de usar todas las funciones locales y simplemente construiré mis propias cadenas con formato de tiempo. Eso me salvará de sorpresas malvadas como esta.
Gabe Halsmer

@ GabeHalsmer: no recomiendo, y nunca he recomendado, permitir que Date.parse analice cadenas (por ejemplo, el último párrafo aquí ). Pero eso es irrelevante aquí, no se menciona en absoluto, ha entendido mal la respuesta si cree que lo hace (por ejemplo, " Puede intentar analizar ...").
RobG

Buen enlace En resumen, las personas deben hacer su propio análisis o su propio método ToString, porque fundamentalmente Date.prototype.toLocalString y Date.parse son incompatibles. Hacer un ToString me pareció lo más fácil para mí. Pero has implementado tu propio análisis. Entonces cualquiera de los dos funcionará para las personas. Lo esencial que quería que todos supieran es que Date.parse no funciona con toLocaleString. Y me llevó horas rastrear esta incompatibilidad debido a lo sutil que era. Las marcas de izquierda a derecha son invisibles en el depurador de Visual Studio.
Gabe Halsmer

Genial, otro voto totalmente equivocado. No es de extrañar que la gente no quiera ponerles sus nombres.
RobG

Para el almacenamiento y el transporte de fechas a otros formatos, toISOString y getTime probablemente brinden el formato de fecha más seguro para el análisis. No conozco ninguna implementación de JS en la última década que no maneje la versión de milisegundos de UTC devuelta por getTime y los valores ISO también han estado en las especificaciones como un formato de fecha analizable durante un tiempo muuuucho. Pero nunca lea las fechas de los elementos de la interfaz de usuario. Eso debería provenir de su capa de aplicación. Y siempre prueba en Safari. Han sido idiotas de nivel IE6 sobre el objeto de fecha.
Erik Reppen

7

Con locales:

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

0

También he estado buscando una solución a este problema, esto es lo que finalmente se me ocurrió:

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

Puedes probarlo aquí: http://jsfiddle.net/B5Zrx/

\ u200E es un carácter de formato que he visto en alguna versión de IE (es unicode marca de izquierda a derecha).

Supongo que si el tiempo formateado contiene algo como "XX: XX: XX", entonces debe ser tiempo con segundos y elimino la última parte, si no encuentro este patrón, nada cambia. Bastante seguro, pero existe el riesgo de dejar segundos en algunas circunstancias extrañas.

Solo espero que no haya una configuración regional que cambie el orden de las partes de tiempo formateadas (por ejemplo, haga que sea ss: mm: hh). Sin embargo, esta marca de izquierda a derecha me pone un poco nervioso por eso, es por eso que no elimino la marca de derecha a izquierda (\ u202E): prefiero no encontrar una coincidencia en este caso y dejar el tiempo formateado con segundos en tal caso.


1
+1 Eres el único que respondió la pregunta correcta. Gracias amigo
mate64

1
Esto hace muchas suposiciones acerca de qué toLocaleTimeString()retornos pueden no ser ciertos para todos los entornos locales.
AJ Richardson

0

Puedes probar esto, que funciona para mis necesidades.

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

o

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

66
Esto no funcionará porque otros idiomas pueden usar un separador completamente diferente que :.
Jon Koops

-2

Aquí hay una función que lo hará, con comentarios que explican:

  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 otros han señalado, toLocaleTimeString () se puede implementar de manera diferente en diferentes navegadores, de esta manera se obtiene un mejor control.

Para obtener más información sobre el objeto Fecha de Javascript, este es un buen recurso: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date


-2

Creo que la pregunta original se puede responder fácilmente con algo que se ha pasado por alto hasta ahora: una simple división de cadena. El tiempo que se devuelve es una cadena de texto, simplemente divídala en el delimitador ":" y vuelva a armar la cadena de la manera que desee. Sin complementos, sin secuencias de comandos complicadas. y aquí tienes:

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

Aunque esta es una pregunta anterior, tuve la misma hace poco, y se me ocurrió una solución más simple usando expresiones regulares y la función de reemplazo de cadena como otra alternativa (no es necesario tener bibliotecas js externas ni depender de la API de internalización ECMAScript) :

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

Este enfoque utiliza una expresión anticipada de expresiones regulares para agarrar el extremo: ss AM / PM de la cadena y reemplaza la parte: ss con un espacio, devolviendo el resto de la cadena intacta. (Literalmente dice "Encuentre dos puntos con dos dígitos y un espacio seguido de AM o PM y reemplace los dos puntos, dos dígitos y la porción de espacio con solo un espacio).

Esta expresión / enfoque solo funciona para entornos locales en EE. UU. Y en EE. UU. Si también desea un resultado similar con, digamos, inglés británico (en-GB), que no usa AM / PM, se necesita una expresión regular diferente.

Basado en el resultado de la muestra del interrogador original, supongo que estaban tratando principalmente con audiencias estadounidenses y el esquema de tiempo en EE. UU.


-3

Simplemente convierta la fecha en una cadena, y luego concatene las subcadenas que desee.

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

3
Agrega alguna explicación a tu publicación.
DigitCart

55
toLocaleTimeStringdevuelve diferentes cadenas en cada navegador según la configuración regional. No puede confiar en estas posiciones, obtendrá resultados diferentes, probablemente rotos, en los navegadores de otras personas.
oriadam
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.