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 – Seleccionar opción de un desplegabl... Si buscáis por internet cómo seleccionar valores de un desplegable con jQuery os saldran multitud de ejemplos en los que todo el mundod ice que les fu...
Asignar acción en jquery a múltiples enlaces En muchas ocasiones nos interesa que al clicar sobre los enlaces de un apartado, el que sea, se ejecute una acción determinada. Pongamos un ejemplo: ...
jQuery – Saber si un checkbox está seleccion... A la hora de enviar formularios, nos puede interesar saber si un checkbox está o no seleccionado. Para ello, jQuery nos proporciona una forma muy senc...
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 *

*