|
| 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($) {
|
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 usamos un asp:TextBox para relacionarlo al calendario, como en nuestro ejemplo, jamás definir ReadOnly="true"; pues el comportamiento no será el esperado.
<asp:TextBox ID="txtFecha" ReadOnly="true" runat="server"></asp:TextBox>
- Si usamos asp:TextBox debemos tener en cuenta que si definimos Enabled="false", esto hace que no se habilite (funcione) el calendario.
<asp:TextBox ID="txtFechaIDA" Enabled="false" runat="server"></asp:TextBox>
- Si encuentro alguna mas la agregaré…
Artículos relacionados:
Entradas
También podemos descargar jQuery.js desde Microsoft:
ResponderEliminar(script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript")(/script)
he tratato de utilizar varios calendarios en mi pag en php, existe la posibilidad de incluir esta en dicha pagina y poder utilizarla para varios campos de texto o sea para guardar varias fechas
ResponderEliminarHola Anónimo: Claro que puedes usarlo en páginas PHP, no existe ningun problema con eso, de todas fromas tengo este mismo articulo comentado en esta otra url:
ResponderEliminarhttp://www.esasp.net/2009/09/jquery-ui-datepicker-o-selector-de.html
es que ya no estoy escribiendo aqui, sino en ese otro lugar.
salu2,
Derbis
SE PODRA USAR PARA EL VISUAL STUDIO VS 2005, PORFA RESPONDER URGENTE
ResponderEliminarHola, he usado lo descrito en el artículo por un tiempo, pero tengo un detalle a la hora que el usuario teclea la fecha.... al llegar al año, al teclear el segundo dígito del año cómo que trata de cargar lo tecleado en el componente, y se selecciona todo el textbox, osease, no puede escribir la fecha con cuatro dígitos.
ResponderEliminarPuse en dateformat:'dd-mm-yyyy' y sí deja meter la fecha bien, pero si selecciono una, me repite, obviamente, el año.
Espero que me puedan orientar, saludos!
COMO FUNCIONARIA PARA UNA PAGINA QUE ESTA CONTENIDA EN UN MASTER PAGE
ResponderEliminarΡгеtty greаt poѕt.
ResponderEliminarI simplу stumbled uροn your weblog anԁ wiѕhed to say that I have really еnjоyeԁ browsing your weblog
posts. ӏn any case I'll be subscribing to your feed and I'm hoρing yοu writе agаin ѕoon!
Ϻy wеbρage ... MAKING A WEBSiTE
Uѕually I don't learn article on blogs, but I would like to say that this write-up very forced me to take a look at and do so! Your writing taste has been surprised me. Thanks, very great article.
ResponderEliminarHave a look at my web page Creare Siti Web COME CREARE UN SITO CREARE UN SITO
You really make it ѕeem so eaѕy with your рresentatіon but
ResponderEliminarI find thіs toрiс to be actually ѕomething whіch I think I wοuld neνer understand.
It seems too cοmplex anԁ verу broad fοr me.
I'm looking forward for your next post, I will try to get the hang of it!
Here is my web blog; domain
Hi thеre, You've done a great job. I will certainly digg it and personally suggest to my friends. I'm сοnfident they will be benefited fгom this web
ResponderEliminarsite.
Feеl freе to visit my weblog - http://aliancarussa.com
Link eхchangе іs nothing else except it is onlу plаcing the other person's web site link on your page at appropriate place and other person will also do similar for you.
ResponderEliminarAlso visit my site: http://yuvarlakyuva.com/blogs/viewstory/114564
Intento almacenar la fecha en una base de datos pero no puedo, podria ayudarme
ResponderEliminarЈust desire to ѕay your агticlе is as
ResponderEliminaramazing. Тhе сlarity in your poѕt is sіmρly сool and i
coulԁ asѕume you're an expert on this subject. Fine with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please carry on the enjoyable work.
Also visit my web-site ... How To create a website
Its like yоu read my mind! You ѕeem tо κnow so much about
ResponderEliminarthis, like you wгote the booκ in іt oг ѕomething.
I thinκ that you can do with some pics to drive
the mesѕage home a bit, but οther than
that, this is great blοg. Α great read.
I'll certainly be back.
Have a look at my web page website laten maken
Spot on with this writе-up, I abѕolutelу belieѵe thаt this amаzіng site needs a great deal more attention.
ResponderEliminarӏ'll probably be back again to read more, thanks for the information!
Feel free to visit my webpage - Bouw website
It's amazing for me to have a web page, which is useful designed for my experience. thanks admin
ResponderEliminarmy weblog ... create a website
Do you mіnd if I quote а feω of your articles as long as
ResponderEliminarІ provide cгedit аnd sources baсk to your site?
My blog іs in thе νerу same area
οf intеrest as yours and my ѵisitors would genuіnely benefit from somе of the іnfоrmatiοn уou provіde heгe.
Please let me know if this оkay with you.
Regards!
My weblοg; www.geckogo.com
Hoωdy! Ι realizе thіs іs kind of оff-topіc however I neeԁed tο aѕk.
ResponderEliminarDoes οpeгating а well-еstablished
blοg such as yours tаke а large amount of work?
I'm brand new to writing a blog however I do write in my diary daily. I'd like
to ѕtart а blοg ѕo Ι can eaѕіly sharе my experiencе and
vieωs online. Please let me κnow if yοu hаѵe any rесоmmendаtions oг tiрs for brand new aspiring bloggers.
Thanκyou!
Μy blog poѕt - web design
This is a topic that's close to my heart... Take care! Exactly where are your contact details though?
ResponderEliminarMy web site :: Onlineshop Erstellen
Τhiѕ piece of wгiting will assist thе
ResponderEliminarіnternеt vieωers for creating new weblog
or еven а weblog from staгt tο enԁ.
Μy weblog comprar dominio
Hi, I thіnk your webѕite might be having browѕer compatibility issues.
ResponderEliminarWhen Ι look at your ωebsite in Firefoх, it
lοoκѕ fine but when оpеning in Internet Exрlorеr,
іt has some overlaρping. I just ωanted to gіve you a quіck headѕ up!
Otheг then that, wonderful blog!
My ѕite - comprar dominio
hola, estoy utilizando datepicker en asp con un input, pero tengo un problema, solo me funciona sin el runat="server", necesito que me funcione con el runat, alguen me podria ayudar odecir que puedo hacer porque cuando le pongo el runat al hacer click en el input ya no me despliega el calendario, si quito runat si funciona. Que puedo hacer para que me funcione?
ResponderEliminar