TimePicker trabajar con horas en jQuery Ui

Los que utilizamos jQuery UI para crear nuestros paneles de administración, disponemos de un widget, datepicker, que nos permite trabajar con fechas. Pero, que pasa con las horas ?

Con TimePicker podremos añadir al widget los sliders pertenecientas a la hora, minuto y segundos, pudiendo crear fechas con la hora incluida.

Para utilizarlo haremos los siguiente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Llamamos las librerías de jquery, jQueryUI y la de TimePicker
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-timepicker-addon.js"></script>
 
// En nuestro formulario, añadiremos un input text
<label for="fecha">Fecha y hora *</label>
<input type="text" name="fecha" id="fecha" class="text ui-widget-content ui-corner-all" />
 
// Ahora asignaremos el TimePicker al input con varias opciones
<script type="text/javascript">
$(function() {
	$('#fecha').datetimepicker({
		defaultDate: "+1w",
		numberOfMonths: 1,
		dateFormat: 'yy-mm-dd',
		timeFormat: 'hh:mm:00'
	});
}
</script>

Bien, de esta manera tendremos una forma de añadir la fecha y la hora con el formato que deseemos como se muestra en la siguiente imagen:


TimePicker jQuery Addon


Como podéis observar, el calendario de la izquierda es con DatePicker (solo la fecha). La de la derecha es con timepicker y se añade la hora, minuto y segundo.

Artículos relacionados

jQuery – Drag & Drop – 2 plugins Os dejo dos plugins que os puede ser de ayuda para el tratamiento del arrastre (drag & drop) de objetos: Draggabilly Permite arrastra solo en de...
jQuery UI – Tutorial 1 – Introducción Breve tutorial que nos muestra que es la librería jQuery UI y un pequeño ejemplo de lo que puede hacer. jQuery User Interface nos facilitará la creaci...
Primer contacto con jQuery Como indican en la web oficial, jQuery es una librería para JavaScript que facilita la programación en las tareas de eventos, crear animaciones y efec...
Puesta en marcha con jQuery En primer lugar, debemos ir al web oficial de jQuery y descargarlo. Para quien no domine el tema, es un fichero .js que se puede descargar desde la pá...

Deja un comentario

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

*