| 
| En un artículo anterior comenté sobre jQuery UI Dialog, un interesante componente para mostrar cuadros de diálogos. |
Hoy quiero hablarles sobre otro componente de esta misma librería, me refiero al DatePicker o Selector de Fecha.
Este widget tiene la funcionalidad de seleccionar una fecha sin la necesidad de teclearla o escribirla, para ello cuenta con un calendario totalmente configurable que se despliega junto al TextBox (input).
Con este artículo pretendo dejar el código completo asociado a 2 ejemplos prácticos:
1. El primer ejemplo es el uso sencillo del mismo, sin apenas ninguna configuración adicional, dejando los valores por defecto.
2. El segundo lo complicaremos un poco mas, definiendo algunas configuraciones que no son escogidas por defecto.
DatePicker Simple
Pero vallamos a la práctica. Lo primero que haremos será escribir el código para poner un simple input de selección de fecha:
El primer paso es hacer referencia a los 3 archivos necesarios:
- La hoja de estilo (css).
- La librería jQuery (jQuery.min.js).
- La librería jQuery (jQueryUI.min.js).
Las referencias a estos 3 archivos del ejemplo, son desde sitios públicos, pero lo aconsejable es bajarnos estos archivos e incluirlos en nuestro propio proyecto.
Lo próximo que haremos es adicionar el código java script y la caja de texto:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryUIDatePicker.aspx.cs" Inherits="jQueryUI_jQueryUIDatePicker" %>
<head runat="server">
<title>jQuery UI DAteTime Picker</title>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/java script">
$(document).ready(function(){
$('#txtFechaSimple').datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div><asp:TextBox ID="txtFechaSimple" runat="server"></asp:TextBox></div>
</form>
</body>
</html>
El resultado seria el siguiente:
|
En realidad el resultado sería el de la imagen con la única diferencia de que el formato de fecha y los nombres de meses y días, no estarían en español, sino en ingles que es la el idioma configurado por defecto. |
Para ver el selector de fecha en español (DatePicker en Español) además de algunas otras opciones, te recomiendo leas el ejemplo que viene a continuación.
DatePicker con algunas configuraciones extras
Este segundo caso lo complicaremos un poco mas, pero veamos primero el código, el resultado y después lo comentamos poco a poco para comprenderlo mejor.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryUIDatePicker.aspx.cs" Inherits="jQueryUI_jQueryUIDatePicker" %>
<head runat="server">
<title>jQuery UI DAteTime Picker</title>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/java script">
$(document).ready(function()
{
$('#txtFecha').datepicker(
{ dateFormat: 'd MM, yy',
minDate: '+0D',
maxDate: '+1Y',
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo',
'Junio', 'Julio', 'Agosto', 'Septiembre',
'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr',
'May', 'Jun', 'Jul', 'Ago',
'Sep', 'Oct', 'Nov', 'Dic']
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<p>Fecha: <asp:TextBox ID="txtFecha" runat="server"></asp:TextBox></p>
</div>
</form>
</body>
</html>
El resultado sería el siguiente:
Comentemos ahora alguna de las configuraciones:
dateFormat: 'd MM, yy'. Con esta línea definimos el formato en que se muestra la fecha en el control de texto. Hemos escogido día mes y año, formato de fecha español.
minDate: '+0D' y maxDate: '+1Y'. Con esto establecemos un rango de fechas validas, o sea, definimos la fecha mínima y máxima donde podremos elegir una fecha, los días fuera de este rango no podrán ser seleccionado y por ende aparecerán deshabilitados.
changeMonth: true y changeYear: true. Acá especificamos que podremos cambiar el mes y el año mediante una lista desplegable. Al usar esta opción es mucho mas sencillo el seleccionar fechas distantes de la actualmente seleccionada.
numberOfMonths: 2. Si deseamos mostrar varios meses (multi-meses), en nuestro caso especificamos que mostraremos 2 meses simultáneamente.
dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'
'Junio', 'Julio', 'Agosto', 'Septiembre',
'Octubre', 'Noviembre', 'Diciembre']
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr',
'May', 'Jun', 'Jul', 'Ago',
'Sep', 'Oct', 'Nov', 'Dic']
Con estas ultimas 3 opciones definimos el comportamiento de idioma español, o sea, definimos los días de la semana y el nombre de los meses que aparecerán en el calendario que se mostrará. Sino especificamos estas características se mostraran con el valor regional por defecto que es el ingles.
Nota: Para solucionar el problema de simular el DatePicker en español (castellano), podemos usar estas ultimas 3 características. O también podemos usar un fichero de configuración regional personalizado (ui.datepicker-es.js) este fichero normalmente podemos descargarlo de internet o bien declararlo nosotros mismos, por si escogemos esta segunda opción (que es además la que les recomiendo), les dejo el código que deberíamos poner en este fichero:
|
jQuery(function($) {
$.datepicker.regional['es'] =
{
clearText: 'Borra',
clearStatus: 'Borra fecha actual',
closeText: 'Cerrar',
closeStatus: 'Cerrar sin guardar',
prevStatus: 'Mostrar mes anterior',
prevBigStatus: 'Mostrar año anterior',
nextStatus: 'Mostrar mes siguiente',
nextBigStatus: 'Mostrar año siguiente',
currentText: 'Hoy',
currentStatus: 'Mostrar mes actual',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
monthStatus: 'Seleccionar otro mes',
yearStatus: 'Seleccionar otro año',
weekHeader: 'Sm',
weekStatus: 'Semana del año',
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
dayStatus: 'Set DD as first week day',
dateStatus: 'Select D, M d',
dateFormat: 'dd/mm/yy',
firstDay: 1,
initStatus: 'Seleccionar fecha',
isRTL: false
};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
|
Existen otras muchas características que podemos definirle a este control, si quieres indagar un poco mas pincha aquí.
Notas sobre jQuery UI DatePicker:
- Si encuentro alguna mas la agregaré…
Artículos relacionados:
Son muchas las novedades que se incluyen y que vamos descubriendo de a poco en la nueva versión de ASP.NET 4.0
Entradas
