jQuery

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

Efectos de animación con jQuery Aquí os dejo algunos enlaces de efectos de animación que pueden realizarse con la librería jQuery: Glimmer - Animación Free Style  Blend - Anima...
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 – Conseguir el valor href de un enlac... Para conseguir el valor de href en un enlace con jQuery utilizaremos el siguiente código: $(document).ready(function() { $("a").click(function(event...
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...