[Tip]TimePicker, un Addon de DatePicker de JQueryUI en tus páginas ASP.NET
Navegando por la vida, y buscando una buena manera de ingresar en un campo de texto la fecha y la hora, me encontré con este “addon de un plugin”, suena bastante raro, pero es cierto, sirve para extender el control de jQueryUI DatePicker
El control DatePicker de JQuery UI
No me voy a explayar mucho en este tema, te recomiendo ver el excelente post que escribió ayer Joe Stanger:
http://www.msjoe.com/2011/03/using-jquery-ui-datepicker-in-an-asp-net-application/
Puedo decir sobre este control que es excelente, skineable, además localizable, esto es, podemos descargar el archivo de idioma que nos acomode.
Pero no provee la funcionalidad de selección de Hora- Minutos!
Como antes comentaba, me encontré con una solución bastante buena, la puedes revisar en el sitio web del autor:
http://trentrichardson.com/examples/timepicker/
Como siempre digo “Todos los aplausos para este colega!” y es que los vale, al agregar este addon a la funcionalidad del calendario nos vamos a encontrar con el siguiente resultado:
Como ves , podemos seleccionar la fecha y la hora, también mediante el seteo del plugin, podemos seleccionar ademas los segundos, o solo la hora, o visualizar varios meses a la vez con una simple configuración:
Y todo esto seteando los archivos necesarios, lo que paso explicar en sencillos pasos:
Paso 1 – Los archivos necesarios
Bajé desde JQueryUI los archivos necesarios para que se visualizara el calendario, (ve el post de Joe Stanger), luego fui a la página del addon de timepicker y lo descargué, la estructura de carpetas es la siguiente:
Paso 2 – Crear las referencias los JS y CSS:
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.6.custom.min.js"
type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon.js"
type="text/javascript"></script>
<script src="js/jquery.ui.datepicker-es.js"
type="text/javascript"></script>
<link href="js/jquery-ui-1.8.6.custom.css" rel="stylesheet"
type="text/css" />
<link href="css.css" rel="stylesheet" type="text/css" />
Paso 3 – Aplicar el AddOn
Estos addon del plugin van asociados a elementos Text (o TextBox) de manera muy sencilla, pasemos a revisar los casos del ejemplo, (visita la página del autor para ver cantidades de ejemplos!)
<script type="text/javascript">
$(document).ready(function () {
$('#tx_fechahora').datetimepicker();
$('#tx_hora').timepicker({});
$('#tx_horasegundo').datetimepicker({
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
$('#tx_fechahora_3meses').datetimepicker({
numberOfMonths: 3
});
});
</script>
Los nombres de las cajas de texto son de cierta manera autoexplicativos, como verás es bastante simple, la atachas la funcionalidad al text, y puedes configurar, si quieres el datetimepicker completo, o solo el timepicker, también es posible setear el formato de la hora, si es que vas a mostrar los segundos, cada incremente en el Slide, la cantidad de meses a mostrar.
Por defecto, el Addon esta en ingles, pero puedes modificarlo en el archivo:
jquery-ui-timepicker-addon.js
En la sección:
this.regional[''] = { // Default regional settings
Y listo!
Como siempre, te dejo el ejemplo listo para que lo utilices:
Espero que te sirva!
Saludos!
Chalalo