Bueno, siento haber dejado de publicar tanto, pero por razones de tiempo (odio segundo de bachillerato ;)) no he podido.
Ésto es simplemente la presentación oficial de un script que hice hace poco, para emular el funcionamiento de input[type="time"] en navegadores que no lo soportaran, y que puedes ver en github
Para que os hagáis una idea, el soporte para <input type="time"> es muy escaso. Actualmente sólo Chrome y Opera.
El uso es sencillo, simplemente creamos una instancia del objeto (TimePikr), pasáis el elemento y listo! Si hay soporte nativo se deja como está. Si no hay soporte o el elemento no es del tipo esperado se aplican ciertas operaciones mágicas que…
No, ahora en serio, simplemente ocultamos el elemento y lo reemplazamos por un input[type="text"] con dos flechas y un par de eventos, que hacen el resto: validación, acceso rápido…
Uso
Hace falta cargar dos archivos: el CSS (que hace que las flechitas se vean genial ;)) y el Javascript. Un uso básico sería así:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ... -->
<link rel="stylesheet" href="timepicker.css">
<!-- ... -->
</head>
<body>
<!-- ... -->
<input type="time" id="timepikr-me">
<!-- ... -->
<script src="timepicker.js"></script>
<script>
var picker = new TimePikr({
element: document.getElementById('timepikr-me');
});
</script>
</body>
</html>Obviamente, si hay soporte nativo no son necesarios, así que… Carga condicional via Modernizr al rescate!
Modernizr.load({
test: Modernizr.inputtypes.time,
nope: ['timepicker.css', 'timepicker.js'],
callback: function() {
var picker = new TimePikr({
element: document.getElementById('timepikr-me');
});
}
})Espero que os sea útil :)