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 – Trigger – Como ejecutar un cl... En muchos ocasiones nos puede interesar simular el click de un usuario sobre un enlace. Dicho de otro modo, provocar el click en un enlace sin que sea...
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á...
bideo.js – poner video en el fondo de página... Librería que permit de forma sencilla, poner un video como fondo en una página web. Es muy utilizado en páginas de inicio para intentar impactar al vi...
jQuery – Traducir hora española a inglesa Es muy común tener en un textbox de un formulario una fecha en español DD/MM/YYY, y queramos convertirla al formato inglés YYYY/MM/DD para poder traba...

Deja un comentario

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

*