4

¿Cómo puedo cambiar el formato del input type="time" a 24 horas?

Busqué las etiquetas de HTML5 pero no hay ninguna respecto a la que necesito.

1

1 respuesta 1

9

Tan facil como esto ( ⚠ si es que tienes el ordenador en formato 24h y usas Chrome):

<input type="time"/>

Nota: Es muy nuevo y no está soportado aun en Firefox o versiones de Internet Explorer y Edge

O puedes usar librerias externas como TimePicker.js:

var timepicker = new TimePicker('time', {
  lang: 'en',
  theme: 'blue-grey'
});
timepicker.on('change', function(evt) {
  
  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
  evt.element.value = value;

});
<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>

<div>
  <input type="text" id="time" placeholder="Horas:Minutos">
</div>

Tienes eventos como:

timepicker.on('open', function(evt){

});

timepicker.on('close', function(evt){

});
4
  • lois6b, disculpa, me refiero al atributo. En w3schools dice que si es un atributo nuevo en HTML5. el 16 mar. 2017 a las 15:22
  • 1
    Ahh. si, es nuevo. Se pueden usar librerias externas. Esto si te funciona, simplifica mucho las cosas hahah
    – lois6b
    el 16 mar. 2017 a las 15:23
  • Gracias el script funciona muy bien al parecer se necesita de javascript o jQuery, pense que solo se necesitaba html el 16 mar. 2017 a las 15:43
  • @JoseLuisGP si ya que el propio de HTML5 que puse primero es muy nuevo, no funciona en todos y el formato para cada navegador varia. De momento, script. este al menos no usa jQuery, pero con él hay muchas mas opciones de timepicker
    – lois6b
    el 16 mar. 2017 a las 15:45

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.