7 de octubre de 2009

jQuery UI, DatePicker o Selector de Fecha

jQuery, jQuery UI, jQuery UI DatePicker, jQuery UI Date, jQuery DatePicker, jQuery UI Date

En este post veremos el código de ejemplo de uso del DatePicker jQuery UI o Selector de Fecha de la librería jQuery UI. Este widget tiene la funcionalidad de seleccionar una fecha sin la necesidad de teclearla o escribirla, para ello cuenta con un calendario (Selector de Fecha) totalmente configurable que se despliega junto al TextBox (input) que almacenará la fecha.

Ver demo: jQuery UI DatePicker o Selector de Fecha.

 

DatePicker jQuery, Ejemplo

jQuery, jQuery UI, jQuery UI DatePicker, jQuery UI Date, jQuery DatePicker, jQuery UI Date

Con este artículo pretendo dejar el código completo asociado a 2 ejemplos prácticos:

1. Selector de Fecha Simple: Este ejemplo es el uso sencillo del DatePicker jQuery UI, sin apenas ninguna configuración adicional, dejando los valores por defecto.

2. Selector de Fecha Avanzado: Este otro ejemplo de DatePicker jQuery lo complicaremos un poco mas, definiendo algunas configuraciones que no son escogidas por defecto.

3. Selector de Fecha Deshabilitando días: Este otro ejemplo de DatePicker jQuery lo complicaremos deshabilitando determinados días de la semana, en concreto eliminaremos los días de fin de semana (sábado y domingo).

4. Notas: Por último veremos algunas notas o recomendaciones que debemos tener en cuenta al usar el DatePicker de JQuery UI.

 

1. DatePicker jQuery UI 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 o TextBox si usamos ASP.NET:

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 UI (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 javascript y la caja de texto que contendrá la fecha y a la que asociaremos la función DatePicker del jQuery UI:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI Date Time Picker Simple</title>
  <link type="text/css"rel="stylesheet"
     href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" />   
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function() {
          $('#txtFechaSimple').datepicker();
      });
  </script> 
</head>
<body>
  <form id="form1" runat="server">
    <div><input id="txtFechaSimple" type="text" /></div>
  </form>
</body>
</html> 

El resultado seria el siguiente:

jQuery, jQuery UI, jQuery UI DatePicker, jQuery UI Date, jQuery DatePicker, jQuery UI Date 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 del calendario de fecha, 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 jQuery en Español) además de algunas otras opciones, te recomiendo leas el ejemplo que viene a continuación.




2. DatePicker jQuery UI Avanzado

Este segundo caso (DatePicker Avanzado) lo complicaremos un poco más, pero solo un poco, veamos primero el código, el resultado y después lo comentamos poco a poco para comprenderlo mejor.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI Date Time Picker Configurado</title>
  <link type="text/css" rel="stylesheet"
    href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" />   
  <script type="text/javascript"   
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 
  <script type="text/javascript">
      $(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 style="font-size:12px;">
  <form id="form1" runat="server">
    <div class="demo"><p>Fecha: <input id="txtFecha" type="text" /></p></div>
  </form>
</body>
</html>

El resultado sería el siguiente:

jQuery Picker Castellano, jQuery, jQuery UI, jQuery UI DatePicker, jQuery UI Date, jQuery DatePicker, jQuery UI DateComo vemos obtenemos un vistoso selector de fecha (DatePicker en Español)
que nos muestra 2 meses conjuntamente que nos facilita la selección de fechas distantes, así como la posibilidad de movernos en los años y meses.

Pero comentemos algunas de las configuraciones que hemos usado en el código:

 

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 seleccionados y por ende aparecerán deshabilitados.

changeMonth: true y changeYear: true. Acá especificamos que podremos cambiar el mes y el año de la fecha mediante una lista desplegable. Al usar esta opción es mucho más 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 en el selector de fecha.

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 de nuestro control DatePicker jQuery UI, 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 mostrarán 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, la que les recomendaría personalmente, que sería adicionar 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, o si lo prefieres puedes descargarte este mismo fichero de DatePicker jQuery UI Configuración Español:

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 (jQuery UI DatePicker), si quieres indagar un poco más accede a este enlace.

Ver demo: jQuery UI DatePicker o Selector de Fecha

 

3. Selector de Fecha Deshabilitando días

Este tercer ejemplo lo he adicionado debido a varias solicitudes que me han realizado en los comentarios de este mismo articulo. En fin, desarrollaremos un ejemplo en el cual mostraremos un selector de fecha, al que le deshabilitaremos los sábados y domingos; especialmente útil si deseamos mostrar solo días laborables, pero veamos el código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI DAteTime Picker Configurado</title>
  <link type="text/css" rel="stylesheet"
    href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" />   
  <script type="text/javascript"   
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 
  <script type="text/javascript">
      $(document).ready(function() {
        $('#txtFechaLaborables').datepicker({
         beforeShowDay: function (day) {
           var day = day.getDay();
           if (day == 5 || day == 6) {
             return [false, "somecssclass"]
           } else {
             return [true, "someothercssclass"]
           }
         }           
        });         
      });
  </script> 
</head>
<body style="font-size:12px;">
  <form id="form1" runat="server">
    <div class="demo"><p>Fecha (Solo días laborables):
      <input id="txtFechaLaborables" type="text" /></p></div>
  </form>
</body>
</html>

El resultado sería el siguiente:

jQueryUI-DatePicker Como vemos obtenemos un vistoso selector de fecha (DatePicker en Español) que nos muestra solo los días laborables, hemos deshabilitado los sábados y domingos.

 

 

 

 

 

 

4. Notas sobre jQuery UI DatePicker:

  • Si usamos un asp:TextBox para relacionarlo al DatePicker (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 DatePicker.

    <asp:TextBox ID="txtFechaIDA" Enabled="false" runat="server"></asp:TextBox>

  • Si encuentro alguna más la agregaré…

Nota: Si estas pensando en adicionar un selector de periodo de fechas o rango de fechas (fecha de inicio y fecha fin) deberías valorar también el plugin Date Range Picker, más información aquí.

Artículos relacionados:

75 comentarios:

  1. Hola, me parecio muy interesante el tema.
    lo que pasa es que estoy construyendo una agenda y quisiera saber si al hacer click en uno de los dias del calendario, se pudiera mostar una pagina, o cargar un div, algo asi, te agradeceria si me pudieras responder

    ResponderEliminar
  2. Hola Pancho:

    Para hacer lo que deseas debes usar el evento onSelect

    $('.selector').datepicker({
    onSelect: function(dateText, inst) { ... }
    });

    Para ver lo que hace, prueba con esto:
    $('#txtFecha').datepicker({
    onSelect: function(dateText) { alert(dateText); }
    });

    ResponderEliminar
  3. Estoy teniendo problemas para poder utilizaer el datepicker de jQuery en mi proyecto de Ado.net. Necesitamos tener el css. en la master page, pero al momento de querer jalarlo en las paginas de carpetas abajo, nos esta marcando errores, alguien tiene idea de como debe ser el setup para poder trabajar desde master page?

    ResponderEliminar
  4. Hola Anónimo: No me queda del todo claro lo q quieres lograr, pero si es cuestion e que quieres ver el css desde cualquier nivel de tu web, lo que te recmiendo es que crees un tema (App_Themes) y con eso resolveras.

    salu2,
    Derbis

    ResponderEliminar
  5. Hola Derbis. Lo que sucede es que necesito poner un datepicker en una pantalla que tengo. La pantalla se encuentra 2 niveles abajo de donde tentgo tanto el css como el master page. Dentro del Master page tengo el link al css del datepicker, pero cuando quiero jalarlo sobre la pantalla donde lo necesito, no me esta reconociendo nada, y esta tronando todo... alguna idea?

    ResponderEliminar
  6. Hola Anónimo:

    Si es ese tu caso entonces te recomiendo lo que te puse arriba. Si estas usando ASP.Net puedes usar los temas (Te creas un nuevo tema, por ej, Default), dentro de ese tema (Carpeta) copias el css del datepicker, al igual que las imagenes.

    Y posteriormente en cualquier pagina que quieras usarlo, herede o no de un MasterPage, solo tienes q vincularle el tema, por ej:

    <%@ Page Language="C#" MasterPageFile="~/mp/listado.master" AutoEventWireup="true" CodeFile="listado_Billetes.aspx.cs" Inherits="listado_Billetes" Theme="Default"%>

    Espero esto te aclare un poco.

    salu2,
    Derbis

    ResponderEliminar
  7. Hola, quizá alguien sabe como obtener el mes en palabras que aparece sobre este datepicker o la manera de que cuando cambio el mes se actualice el mes y no quede con el actual al obtener ya que al obtener la fecha con el evento onselect se muestra el mes anterior y no el que cambio.

    ResponderEliminar
  8. Hola Luis Alexander:

    No comprendo muy bien lo que me comentas, o sea, lo que imagino que comentas es algo que sé que no ocurre, en fin, probablemente no te haya entendido bien. Te dejo un enlace a un ejemplo de demo, fíjate si en esta página ocurre tu problema o no y coméntamelo.

    http://demos.esasp.net/jQueryUI/jQueryUIDatePicker.htm

    salu2,
    Derbis

    ResponderEliminar
  9. exelente entrada, es justo lo que estaba buscando. me quedo muy claro, gracias por publicarla =)

    ResponderEliminar
  10. Gracias Mauro, me alegro que te haya sido de utilidad, ese es el objetivo.

    Hasta la próxima...

    ResponderEliminar
  11. Hola, quizas alguien pueda ayudarme, estoy usando datetimepicker de jQuery UI, pero necesito que cuando se desplieque el calendario, si cambio de mes o año por el select, ese cambio se vea reflejado en el textbox de la fecha.

    ResponderEliminar
  12. Hola Anónimo:

    Lo que necesitas es hacer uso del evento “onChangeMonthYear”, te dejo un ejemplo:

    $('#txtFecha').datepicker({
    dateFormat: 'd MM, yy',
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 2,
    onChangeMonthYear: function (year, month, inst) {
    $(this).val($.datepicker._formatDate(inst, inst.currentDay, month - 1, year));
    }
    });

    Te deseo suerte con jQuery UI, un excelente pluging de jQuery.

    Salu2,
    Derbis

    ResponderEliminar
  13. Hola Derbis

    Una pregunta, estoy tratando de redimensionar el DatePicker porque se ve muy grande. El caso es que no puedo. Estoy probando cambiando los width en el css pero no encuentro efecto. me podrías ayudar, por favor?

    Muchas gracias

    Julio

    ResponderEliminar
  14. Hola Julio:

    Imagino que te refieres al input, si es así solo tienes que hacer lo siguiente:

    [input id="txtFecha" type="text" style="width:90px;" /]

    Sino es esta tú pregunta, no dudes en escribirme.

    salu2,
    Derbis

    ResponderEliminar
  15. saludos, yo tambien tengo el mismo problema de que se ve muy grande, ya hice el cambio que indica del style="width=90px" pero eso solamente cambia el tamaño del input mas no el tamaño del datepicker que se presenta.

    ResponderEliminar
  16. Hola Anónimo, ya comprendo lo que te está sucediendo, perdona pero no habia entendido bien el comentario anterior.

    Bueno en fin, para el problema que planteas, tienes 2 soluciones:
    1. Cambiar el estilo (style) de tu body poniendole un font-size más pequeño, por ejemplo font-size:11px es el que uso en el ejemplo.
    2. Modificar el css del datepicker, buscas la clase .ui-datepicker y le pones un font-size:11px; esto es lo que he hecho en mis proyectos. La clase .ui-datepicker quedaria así

    .ui-datepicker [
    font-size:15px;
    padding:0.2em 0.2em 0;
    width:17em;
    ] (Recuerda remplazar los [] por los respectivos caracteres de abrir y cerrar bloque)

    Y con esto todo listo, tu DateTimePicker de jQuery UI se verá más pequeño, podrás cambiarle el tamaño aumentando o disminuyendo el font-size.

    Espero que resulvas con esto...

    salu2,
    Derbis

    PD: Por favor si resuelves con esto dímelo para saber que era esto lo q preguntabas, y te aconsejo que para la próxima registres tu comentario con algun usuario, con eso garantizas que la respuesta te llegue por mail.

    ResponderEliminar
    Respuestas
    1. Buenas,
      Tenia el mismo problema pero lo reolvi en la siguiente linea de código

      .ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: .8em; }

      modificando este valor a font-size: .8em;

      Saludos
      maucker

      Eliminar
    2. excelente me sirvio lo deje con .6 y se ve muy bn! \m/_

      Eliminar
  17. Saludos, gracias, el css para hacerlo mas pequeño si funciona, ya se lo puede visualizar en el tamaño deseado.

    ResponderEliminar
  18. Hola.
    Estoy usando jQuery, UI, y otras cosillas.
    Uso las opciones de drag and drop para tener varias ventanitas simuladas. y las pongo en un array. Puedo usar este codigo para activarle el datepicker a cualquier input que este dentro de un div que tenga por id por ejemplo id='drag5'

    $("#drag"+ventanaActual.num).find('#txtFechaNacimiento').datepicker({
    changeMonth: true,
    changeYear: true
    });

    Ahora, como tengo bastantes venanitas, mejor hago esto para activarle a cualquier ventana sin necesidad de ponerle #txtFechaNacimiento al activar el datepicker sino con un estilo llamado .fechasTxt:

    $("#drag"+ventanaActual.num).find('.fechasTxt').datepicker({
    changeMonth: true,
    changeYear: true
    });

    La cuestion es que aunq se activa el datepicker en cada nueva ventana, siempre la fecha va a parar a la primera q se abrio, asumo que internamente jQuery datepicker guarda o asocia el id del input text y no una referencia directa, asi luego le pone la fecha al que tenga id='fecha' pero siempre al primero y no al q origina el calendario con datepicker.

    Debo poner a cada input para fecha un id diferente? o puedo forzar al constructor a q utilice el mismo input como destino usando this. o algo asi no importa que existan varios con el mismo id en todo el document. (aunq en diferente ventanita accesible univocamente con $("#drag"+ventanaActual.num).find('#txtFechaNacimiento') )

    Att. Camilo.

    ResponderEliminar
  19. Hola Camilo:

    Aun no he usado los drag and drop de jQueryUI, pero en teoria podrias hacer lo que cuentas tranquilamente, incluso si a los input la asociaste una clase particular (fechasTxt), podrias activar todos estos input como DateTimePicker de jQueryUI haciendo algo parecido al código sgte:

    $('.fechasTxt').datepicker();

    Así le estarias asociando a todos los elementos que tengan como CSS Class 'fechasTxt' el comportamiento datetimepicker jQueryUI.

    A lo mejor te conviene ademas estrechar la busqueda del DOM con este otro selector muy parecido al anterior:

    $('input.fechasTxt').datepicker();

    Bueno, espero te sea útil, cualquier cosa cuentame como lo resuelves.

    salu2,
    Derbis

    ResponderEliminar
  20. Holas.
    Pues no se pudo lo que yo buscaba...

    No tengo ningun problema al asociarle el datepicker a los inputs.

    En realidad la cosa va asi:

    Aprovecho los drags and drops para tener varios div en mi document como si fueran ventanas o formularios diferentes. Ahora como tengo varios de parametros que son similares pues aprovecho para tener cosas como:
    <div id="dragventana1">
    ...
    <input type="text" id="txtFechaReg" size="20" tabindex="6" class="fechasTxt" />
    ...
    </div >
    y otra mas o menos asi
    <div id="dragventana2">
    ...
    <input type="text" id="txtFechaReg" size="20" tabindex="6" class="fechasTxt" />
    ...
    </div <

    Porque son similares ya saben, campos tipo codigo, descripcion, fecha registro , fecha salida etc. Entonces, con este tipo de codigo puedo acceder a cualquier elemento de forma unica en una de las ventanitasdiv aun cuando haya otros con el mismo id en otras ventanasdiv

    $("#drag"+ventanaActual.num).find('#txtCodigo')

    Ahora como en algunas ventanas hay varios input para fechas uso

    $("#drag"+ventanaActual.num).find('.fechasTxt').datepicker(...)

    para cada vez q abro una nueva ventanadiv (o cargo un div mejor dicho al document) les activo el datepicker a todos los campos de fecha en el nuevo ventanadiv, y funciona ! maravilloso.

    Ahora, la cosa es q como muchas tienen comportamiento similar y validacion similar uso funciones comunes para tomar los datos de todos los ventanadiv diferentes para enviarlos con ajax. Por eso me conviene q cada campo de fecha de ingreso se identique como id="fechaIng" en todos los ventanadiv y no tenga q poner por ejemplo id="ventana1fechaIng"

    El lio es q jquery.ui.datepicker internamente cuando selecciono una fecha del calendario desplegado pues no usa mi
    $("#drag"+ventanaActual.num).find('#txtFechaIng')

    sino algo como $(idinstancia) solamente entonces le pone la fecha, solamente al primer input con id="txtFechaIng" en todo el document o sea , al primer ventanadiv que abri asi tenga varios abiertos.

    Intente usando la opcion - altField - pero no paso nada.

    Solucion deseada originalmente: pasarle a datepicker() una referencia directa al input

    var cal=$("#drag"+ventanaActual.num).find('#txtFechaIng');
    $("#drag"+ventanaActual.num).find('#txtFechaIng').datepicker(quien : cal);

    pero parece q no se puede.

    solucion posible: asignar a cada input de fecha un id unico en todo el document no solo en los divventana.
    inconveniente: pierdo reutilizacion de codigo. paso de utilizar unas pocas lineas para recoletar informacion de todos los formularios y para validar, a repetir codigo para cada ventanadiv usando switchs o if u otras cosas.

    reflexion: ya que estoy usando drag and drop y esta bonito, y el uso de
    $("#drag"+ventanaActual.num).find('#txtFechaIng')
    funciona, entonces hacer mas uso en mi codigo que mencionaba de este tipo de selectores para recoletar y para validar siempre:

    $("#drag"+ventanaActual.num).find("#drag"+ventanaActual.num+'txtFechaIng')

    despues de renombrar todos los inputs de fechas.

    Gracias por su tiempo.

    Camilo
    feralymph@hotmail.com

    ResponderEliminar
  21. hola Derbis:

    tengo una consulta, si yo quisiera cambiar el estilo de un dia en especifico, por ejemplo quiero destacar los feriados dde un mes, como se podría hacer?

    Deantemano muchas gracias, saludos desde Chile =)

    ResponderEliminar
  22. Hola Derbis
    Quisiera saber como puedo seleccionar un dia por default en un datepicker
    es decir si selecciono el martes de un combo que tenga los dias de la semana que funcion o evento necesito usar en el datepicker para q todos los martes queden seleccionados por default.


    Gracias Juliana.

    ResponderEliminar
  23. hola quisiera saber como uedo hacer para tener el calendario como el tuyo asi con los css especificos

    ResponderEliminar
  24. Hola Anónimo:

    El el ejemplo del calendario (jQueryUI Datepicker) que aparece en la imagen, uso el propio css que expone el sitio oficial, y puedes descargartelo desde la siguiente url: (http://jqueryui.com/download), en mi caso en concreto he usado la hoja de estilos Redmond para jQuery UI.

    Espero resuelvas con esto, de lo contrario dejame un mail y te lo envío.

    salu2,
    Derbis

    ResponderEliminar
  25. Hola Derbis.
    Genial tu post... viene muy bien para la gente que no controla js y que quiere meter algun pequeño control. Gracias!.

    Una pregunta, por lo que veo en la declaración asocias el datepicker a un input predefinido, por lo que por lo que entiendo solo se puede ejecutar una vez por página sobre el input con ese nombre.
    ¿como seria para que funcione para varios inputs dentro de la misma pagina?.
    Un abrazo y gracias por adelantado,

    ResponderEliminar
  26. Hola Junkete:

    Muchas gracias por tu comentario. Respondiendo a tu pregunta te comento que para asociar el control DatetimePicker de jQuery UI a varios input, es igual de simple, y puedes usar cualquiera de estas 2 variantes:

    Repetir la línea de asociación para cada uno de los input:
    $('#txtFechaDesde').datepicker();
    $('#txtFechaHasta').datepicker();
    $('#txtFecha3').datepicker();
    etc, etc ...

    O bien, puedes crear una clase (css) para cada input al que quieras ponerle el calendario y asociar por clases, por ejemplo, podrías hacer lo siguiente:

    $('ClaseFecha').datepicker();

    Y con esto le estarías asociando el datepicker jQuery UI a todos los controles que tengan la class='ClaseFecha'

    ([input id="txtFecha" class='ClaseFecha' type="text" style="width:90px;" /])

    Espero haberme hecho entender.

    Salu2,
    Derbis

    ResponderEliminar
  27. Gracias Derbis, he optado por la segunda opción y me ha funcionado perfectamente!!
    Un abrazo y gracias de nuevo por tu ayuda muy util para gente como yo que se apoya en el js sin meterse mucho.... :P

    ResponderEliminar
  28. estoy utilizando jquery necesito saber como puedo desabilitar del calendario los sabados y los domingos

    ResponderEliminar
  29. Tengo el siguiente problemita :::: todo funciona excelente pero cuando se despliega el datapiker se despliega debajo de los otros objetos del formulario :::: como hago para que salga encima al igual que demo ::: uso ASP .NET con a codificación de Visual Basic respuesta a Leyton_espitia@hotmail.com

    ResponderEliminar
  30. Hola buen articulo pero tengo un inconveniente lo que pasa es que tengo un formulario en donde tengo dos campos fecha_inicial y fecha_final la idea es que cuando elija una fecha en fecha_inicial en fecha_final el rango a mostrar inicie a partir de la fecha elejida en fecha_inicial. he probado varias opciones pero no lo he logrado agradezco tu colaboracion.

    ResponderEliminar
  31. Hola e usado este calendario en un proyecto web sin MasterPage y me funciono perfecto, mi problema empezo cuando empeze otro proyecto con MasterPage use el mismo codigo para esto pero nada no me funciono. Me puse a investigar un poco y me parece que encontre el problema, bueno si estoy equivocado espero su ayuda, como les decia cuando uso l codigo sin MasterPage para indicar a que texto enlazo el calendario es este codigo

    $('#txtFecha').datepicker({

    pero al usar masterpage e visto que adiciona algo relacionado al contentemplateholder, si es este el caso me gustaria que me digan que codigo deberia cambiar o agregar para usar este calendario en paginas con MasterPage.

    Saludos

    ResponderEliminar
  32. Buenas, estoy usando el DtePicker y esta barbaro, pero tengo 2 problemas.
    1) como pongo mas de un datepicker dentro del mismo form.
    2) Como separo el contenido del textbox con la fecha como para que me quede de la forma que esta en este sitio que es lo que estoy haciendo.
    El sitio es https://es.alamo.com/alamo/enes/24/_www_alamo_com/

    Donde dice Fecha de Alquiler, necesito separarlo como muestra ahi.

    Muchas Gracias

    ResponderEliminar
  33. Hola he visto tu ejemplo y me ha servido pero tengo un problema con el tipo de txt es un txt input de Htm pero no puedo ponerle runat server para que sea visible no se que puedo hacer si utilizo un asp:texBox no funciona

    ResponderEliminar
  34. Buenas tengo un problema tengo una aplicacion web hecha en visual studio y le instale el EO.web y a la hora de publicarlo se me caen las paginas donde agregue el componente. Si alguno sabe en serio me puede ayudar

    ResponderEliminar
  35. hola buen aporte, pero mi duda es que si hay imagenes que se tengan que agregar? o solo es el css o donde bajar el css gracias

    ResponderEliminar
  36. Hola Anónimo:

    Para que funcione el Datepicker tal y como aparece en los ejemplos de aquí, solo tienes que agregar el css tal y como aparece en el ejemplo de arriba:

    link type="text/css"rel="stylesheet"
    href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css"

    Con eso será suficiente, ahora bien, sino te gustara ese estilo y prefirieras otra combinación de colores y estilos, puedes ir a esta dirección y descargarte la que desees.

    http://jqueryui.com/themeroller/

    Suerte!!!!!!

    ResponderEliminar
  37. Hola, inicie todo bien el calendario, pero al momento de hacer click en la imagen para que emerga el calendario, esta imagen me aparece abajo del campo de texto, lo cual yo quiero que me aparesca al lado derecho del campo de texto, como puedo configurar la posicion de la imagen?. Muchas gracias

    ResponderEliminar
  38. Buenas tardes. Estoy usando datepicker en el desarrollo de una aplicación web con Java EE. El problemas es que utilizar la funcion

    $(".jq_fecha").datepicker("option", "minDate", fechaActual);

    Me baja el rendimiento de la aplicación mucho (Tarda demasiado en cargar la pagina) Hay alguna otra manera de hacerlo aparte de este metodo??

    ResponderEliminar
  39. Hola Juane:

    El bajo rendimiento de tu aplicación, puede deberse, a que sí la página está muy cargada (tiene muchos controles), el selector no es el más apropiado:

    $(".jq_fecha") -> con esto estas buscando en todos los objetos del DOM y comprobando su clase para ver si coincide con 'jq_fecha', si el DOM tiene muchos objetos, pues incidirá negativamente en el rendimiento.

    La solución sería usar como selector el propio ID del control, no importa que sean varios, ej:
    $("#inputFechaIda").datepicker(...
    $("#inputFechaReg").datepicker(...
    $("#inputFecha111").datepicker(...

    Esto es mucho más rápido... espero te sirva.

    salu2

    ResponderEliminar
  40. Hola Buenos días tengo una duda quiero pasarle como campo oculto, unos días para que los recoja y los muestre en el mismo calendario. Y no se como puedo hacerlo me podrías ayudar muchas gracias

    ResponderEliminar
  41. Buenos días,
    Me gustaria saber como puedo asignar el DatePicker a un botón de asp.net, he intentado pero solo me funciona con el input, gracias.

    ResponderEliminar
  42. esta buenisimo, me ayudo mucho . Gracias

    ResponderEliminar
  43. Hola, muy bueno el post! y me parece increíble la disposición para ayudar a quienes tenemos algunos problemas.
    Me gustaría asociar el Datepicker a un textbox, lo he intentado.. pero no logro encontrar la falla.. espero me puedas ayudar.. y gracias de nuevo

    ResponderEliminar
  44. ¡Hola!
    Interesante artículo. Una pregunta, ¿como se puede configurar los colores de los datepicker?

    Gracias y saludos,

    ResponderEliminar
  45. hola tengo un problema con el jquery datepicker. no sale cuando publico mi pagina asp.
    le agradeceria su ayuda.

    Saludos
    Hector

    ResponderEliminar
  46. hola
    Mi nombre es Waldo y me gustaría saber si se puede mostrar en el calendario una X, ya sea como caracter o como imagen para indicar el cierre de la ventana del calendario... Agradezco tu ayuda..

    ResponderEliminar
  47. Hola esepcional lo que has escrito queria ver si me ayudabas con un pequeño problema que tengo con el datapicker, veras quiero darle la fecha del servidor ya logro recuperar la fecha del servidor pero no se como asignarsela a mi datapicker te agaradeceria mucho. Gracias.

    ResponderEliminar
  48. Buenas me gustaria saber como se hace para poder bloquear la pagina pero que los mensajes de la paguina se muestren xq el control me bloquea todo y no se muestra el mensaje

    ResponderEliminar
  49. Buenas tardes tengo una duda muy grande queria ver si me podian ayudar por favor:

    en un mismo form en php necesito colocar dos datepicker, pero donde el segundo de ellos salga como minDate la fecha que se selecciono del primer no me funciona, muchas gracias en en php codeigniter

    ResponderEliminar
  50. para desabilitar los dias posteriores a la fecha actual como seria??

    ResponderEliminar
  51. Que tal podrian ayudarme, en una pagina sola si me funciona pero en si uso masterpage no , agrego las referenncias en la master y la funcion en la child ?

    ResponderEliminar
  52. hola , me ha servido mucho , lo único que no pude lograr es manejar un rango de fecha mínima mayor a 10 años .. , quiero utilizar esto para poner fechas de nacimientos osea debería poder poner años como 1950 etc .. pero solo logro configurarlo que me muestre desde el 2001 en adelante . desde ya muchas gracia .

    ResponderEliminar
  53. Hola Que tal excelente material de jquery con datepicker lo he probado con elementos html como asp pero necesito su ayuda para poder implementarlo en una pagina asp ligada a masterpage ya que no me muestra el calendario... he buscado en varios sitios pero nada concreto... ya he probado por ejemplo los tabs de jquery con pagina asp ligada a masterpage y funciona perfecto pero el datepicker no funciona!!! he probado muchas maneras pero no lo logro funcionar.. alguna idea? necesito mucho su ayuda.. gracias... y saludos

    Atte: Jesus

    ResponderEliminar
  54. DONDE PUEDO DESCARGAR LAS IMAGENES PARA TENERLAS DE MANERA LOCAL?

    ResponderEliminar
  55. Hola, es la primera vez que desarrollo con JQUERY y no consigo saber como comunicar el código c# con el resultado del JQUERY. Estoy haciendo un ejemplo similar al que tu has puesto solo que el calendar se muestra directamente sin el uso de textbox. ¿Como puedo recoger desde c# el valor seleccionado cuando el cliente haga click sobre un día del calendario?

    Muchas gracias y un saludo.

    ResponderEliminar
  56. si me pudieras ayudar, para desabilitar los dias posteriores a la fecha te lo agradeceria

    ResponderEliminar
  57. Hola,
    Alguien sabe como hace para que el datepicker empieze desde el dia Lunes la semana en vez del Domingo??
    Gracias,

    ResponderEliminar
  58. COMO AGO PARA QE APARESCA EN EL SELECT DEL ANÑO DESDE 1900 ASTA EL 2050 HE AYUDA PORFA

    ResponderEliminar
  59. como hago para utilizar dos calendarios con diferente configuracion en la misma pagina?
    gracias

    ResponderEliminar
  60. Buenas estoy usando el datepicker en un textbox osea el aspx, pero no me aparece el mismo en la ventana, ya probe con lo que colocaste en tu tutorial y no funciona. Como puedo hacer para que salga la fecha en ese campo de texto?

    ResponderEliminar
  61. ¿Como puedo hacer para seleccionar varias fechas no consecutivas?

    ResponderEliminar
  62. como puedo seleccionar varios dias dados y bloquear todos los demas

    ResponderEliminar
  63. saludos como pudiera colocar un colocor a los dias segun una condicion
    gracias

    ResponderEliminar
  64. Hola como podria hacer para que me seleccione más años? es para seleccionar dia de nacimiento y la verdad no me sirve hasta el 2002 xD

    ResponderEliminar
  65. hola me muy bueno el Jquery, pero tengo una dificultad cuando, despues que seleciono la fecha mas abajo tengo unos DropDownList y cuando seleciono uno de sus items se borra la fecha que cargue del datepiker me puedes ayudar ??

    ResponderEliminar
  66. hola necesito saber como hago para que me seleccione la fecha actual y 3 fechas anteriores y me deshabilte el resto

    ResponderEliminar
  67. Hola, cuando asocio el datepicker a un asp:textbox no muestra el calendario. Y si en cambio uso el input, al agregar runat=server para recuperar la fecha con c# deja de aparecer el calendario. Alguna idea de como recuperar el valor de la fecha desde c#.

    ResponderEliminar
  68. no muestra las fechas del calendario < mes año > por que puede ser

    ResponderEliminar
    Respuestas
    1. hola trate de descargar los archivos css y js copiando la url pero las imagenesno las tengo me puedes enviar las imagenes al correo polaco_hmv@hotmail.com gracias de ante mano :)

      Eliminar
  69. Buenas tardes Amigos

    estoy tratando de que cuando se realice un click sobre la caja de texto o textbox también se muestre el calendario estoy usando este código


    $(function () {
    $("[id$=txtDate]").datepicker({
    showOn: 'button',
    buttonImageOnly: true,
    showAnim: 'fadeIn',
    buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',

    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    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']
    });
    });



    Mil gracias de ante mano

    ResponderEliminar
  70. Resuelto lo del click de esta manara


    $('#txtDate').click(function() {
    $('#txtDate').datepicker('show');
    });

    ResponderEliminar
  71. Amigo quisiera saber cómo puedo configurar el tamaño del calendario y el color del mismo y gracias de ante mano....

    ResponderEliminar