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

Enviar formulario con jQuery AJAX Partimos de la premisa que tenemos un formulario creado, y queremos enviar los datos con AJAX. Dicho de otro modo, enviaremos el formulario sin marcha...
jQuery UI – Tutorial 3 – Widget Date P... Breve tutorial que se muestra cómo utilizar el widget Date Picker de la librería jQuery UI. Un widget que facilita al usuario insertar una fecha en un...
Plugins jQuery imprescindibles para crear una apli... Os presentamos algunos plugins imprescindibles para el desarrollo de aplicaciones web. Suponiendo que trabajáis con jQuery y jQuery UI (librería de...
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...

Deja un comentario

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

*