aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

jQuery.timepckr es un plugin para jQuer y que te permite ofrecer al usuario un sistema alternativo para introducir una hora.

Como vemos en la imagen, se trata de un sistema diferente lo que puede ser un problema para usuarios poco diestros en la navegación por Internet. Aunque es un sistema muy sencillo y rápido cuando sabes como funciona, ya que únicamente has de bajar el ratón para seleccionar la hora que quieres indicar.

Código

$(function(){
    $('#test-1').timepickr();
});

Muy sencillo, únicamente indicamos el elemento <input /> en el que alojaremos la opción seleccionada.

Opciones

Entre las opciones principales del plugin, nos encontramos unas cuantas que nos permiten personalizar en cierta medida el aspecto y funcionamiento del mismo:

• hour: Horas que se pueden seleccionar. Ej: [1,2,3,4,5,6,7,8,9,10,11,12]
• minute: Minutos disponibles. Ej: [0, 15, 30, 45]
• second: Segundos disponibles. Ej: [0, 15, 30, 45]
• amPm: Etiquetas AM / PM. Ej: ['am', 'pm']
• showHour: Muestra el selector de horas (default: true)
• showMinute: Mustra el selector de minutos (default: true)
• showSecond: Muestra el selector de segundos (default: false)
• showAmPm: Muestra el selector de AM/PM (default: true)
• showDelay: delay desde que se muestra (default: 0)
• hideDelay: delay desde que se cierra (default:0)li>
• timeout: Tiempo en segundos para el cierre automático (default: 0 == nunca)
• speed: Velocidad de la animación (default:0)
• onClose: Se ejecuta al cerrar
• onClosed: Se ejecuta una vez cerrado
• onOpen: Se ejecuta al abrir
• onOpened: Se ejecuta al estar abierto
• onHide: Se cierra al ocultarse
• repSpeed: Velocidad de reposicionamiento (default:50)
• repDelay:  Delay de reposicionamiento (default: 10)
• val: Valor inicial (default: false)
• formats: Muestra formatos (default:{})
• formats.field: Formato de hora del <input />. Ej: {hour:02d}:{min:02d} {amPm:s}
• formats.hour : Formato para las horas. Ej. {0:02d}
• formats.minute: Formato para los minutos. Ej: {0:02d}
• formats.second: Formato para los segundos. EJ: {0:02d}
• formats.amPm: Formato para AM/PM. EJ.{0}