Contenido

jQuery.timepckr, selector de horas con jQuery

8 Oct

+ 2

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

jquerytimepckr

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}

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.