miércoles, 16 de septiembre de 2009

jQuery UI, DatePicker o Selector de Fecha

jQuery UI Solo

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).

jQuery Picker Simple

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:

  1. La hoja de estilo (css).
  2. La librería jQuery (jQuery.min.js).
  3. 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:

jQuery Picker Simple 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:

jQuery Picker Castellano

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 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:

22 comentarios:

  1. También podemos descargar jQuery.js desde Microsoft:

    (script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript")(/script)

    ResponderEliminar
  2. 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

    ResponderEliminar
  3. Hola 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:

    http://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

    ResponderEliminar
  4. SE PODRA USAR PARA EL VISUAL STUDIO VS 2005, PORFA RESPONDER URGENTE

    ResponderEliminar
  5. Hola, 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.
    Puse 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!

    ResponderEliminar
  6. COMO FUNCIONARIA PARA UNA PAGINA QUE ESTA CONTENIDA EN UN MASTER PAGE

    ResponderEliminar
  7. Ρгеtty greаt poѕt.
    I 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

    ResponderEliminar
  8. 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.

    Have a look at my web page Creare Siti Web COME CREARE UN SITO CREARE UN SITO

    ResponderEliminar
  9. You really make it ѕeem so eaѕy with your рresentatіon but
    I 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

    ResponderEliminar
  10. 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
    site.

    Feеl freе to visit my weblog - http://aliancarussa.com

    ResponderEliminar
  11. 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.

    Also visit my site: http://yuvarlakyuva.com/blogs/viewstory/114564

    ResponderEliminar
  12. Intento almacenar la fecha en una base de datos pero no puedo, podria ayudarme

    ResponderEliminar
  13. Јust desire to ѕay your агticlе is as
    amazing. Т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

    ResponderEliminar
  14. Its like yоu read my mind! You ѕeem tо κnow so much about
    this, 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

    ResponderEliminar
  15. Spot on with this writе-up, I abѕolutelу belieѵe thаt this amаzіng site needs a great deal more attention.
    ӏ'll probably be back again to read more, thanks for the information!

    Feel free to visit my webpage - Bouw website

    ResponderEliminar
  16. It's amazing for me to have a web page, which is useful designed for my experience. thanks admin

    my weblog ... create a website

    ResponderEliminar
  17. Do you mіnd if I quote а feω of your articles as long as
    І 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

    ResponderEliminar
  18. Hoωdy! Ι realizе thіs іs kind of оff-topіc however I neeԁed tο aѕk.
    Does ο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

    ResponderEliminar
  19. This is a topic that's close to my heart... Take care! Exactly where are your contact details though?

    My web site :: Onlineshop Erstellen

    ResponderEliminar
  20. Τhiѕ piece of wгiting will assist thе
    іnternеt vieωers for creating new weblog
    or еven а weblog from staгt tο enԁ.



    Μy weblog comprar dominio

    ResponderEliminar
  21. Hi, I thіnk your webѕite might be having browѕer compatibility issues.
    When Ι 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

    ResponderEliminar
  22. 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