Selector de hora estilo Material design con jQuery MDTimePicker

Demo Descarga : MDTimerPicker

Selector de hora estilo Material design con jQuery MDTimePicker, este plugin te muestra un reloj redondo donde puedes seleccionar la hora, lo interesante de este plugin es que el reloj que te muestra en pantalla es al estilo Material design que de igual forma puedes usar en alguno de tus proyectos web.

Demostración: https://oscaruhp.github.io/MDTimePicker/

Para implementar este plugin en tu proyecto web necesitas hacer lo siguiente:

1.- Incluir el archivo .js del framework jQuery, recuerda que el plugin lo requiere.

<script src="http://code.jquery.com/jquery.min.js"></script>

2.- Incluir los estilos de Bootstrap

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

3.- Incluir los archivos .js y .css del plugin para poder transformar los elementos input HTML.

<link href="mdtimepicker.css" rel="stylesheet">
<script src="mdtimepicker.js"></script>

4.- Crear el input que se transformará en el reloj.

<input type="text" id="timepicker"/>

5.- Agrega el script que trasnforma el elemento HTML Input en un excelente reloj estilo material design que permite la selección de una hora determinada.

$(document).ready(function(){

$('.timepicker').mdtimepicker({
timeFormat: 'hh:mm:ss.000', // Formato del tiempo.
format: 'h:mm tt', // Formato del picker.
theme: 'red', // Colores : 'red', 'purple', 'indigo', 'teal', 'green'
readOnly: true
});

});

Si usas este plugin escribe tu opinión y coméntanos en que proyecto lo usaras o lo usaste.

 

Contenido relacionado: