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

Demo Descarga 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 :)

5 pensamientos en “Polyfill para input type time – TimePikr

  1. Imagen de Julian TorresJulian Torres el dijo:

    Hola sr. Emilio, recibe un cordial saludo desde Colombia, mi pais. El presente comentario es para felicitarte, creo que eres una persona muy inteligente y también muy amable al publicar estos buenos artículos para que personas como yo aprendamos. Mira, yo acabo de iniciar la universidad, soy estudiante de Ingeniería de Sistemas, soy nuevo en esto estoy hasta ahora empezando, y aqui la ingeniería de sistemas actualmente se basa en el lenguaje Java, y realmente he aprendido mucho en comparación porque hace tan solo unos mese no tenia idea de que era o significaba java, ni la mas minima idea, sin embargo me falta demasiado pero demasiado………. por aprender, tengo 17 años y me inclino mas por el HTML, pero hay algo que me inquieta mucho que el el Javascript, que es lo que veo que tu manejas muy bien, …. tan solo quisiera decirte que en base a tu encuesta, quisiera que hablaras mas acerca de Javascript, …. segun lo que entiendo, el Javascript es como un derivado de Java y la forma en que se integra con HTML y CSS no es compleja, sin embargo ha sido dificil para mi, si te digo muy dificil, por tanto quisiera pedirte muy amablemente y compartirte que me encataria que sigas publicando sobre Javascript con HTML y CSS, ……. esto te lo digo porque tienes una encuesta en la que preguntas de que temas hablar, y esos son mis favoritos …….y ademas tu sabes y conoces mas que yo …… o que digo mas… montones mas que yo!!!

    Sr. Emilio, te agradezco enormemente por tus artículos, me has ayudadi mucho!, es la primera vez que comento, nunca lo habia hecho por que no suelo hablar, mas bien soy timido, pero quería y quiero agradecerte y compartirte lo anterior!. Soy tan solo un lector mas de tu genial blog!. De nuevo te agradezco! y te envío un cordial saludo desde Bogotá – Colombia. Hasta pronto Sr. Emilio, gracias!!.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.