Como sabran jQuery UI es un plug-in de jQuery que contiene muchos widgets bastante útiles.

En este caso les mostraré una función que permite al Datepicker deshabilitar rangos de fechas que no sean necesarios mostrar o tan solo fechas en particular (como días festivos).
La función es la siguiente:
var RangeDates = ["2/2/2011, 2/10/2011", "2/12/2011, 2/20/2011", "4/20/2011, 5/15/2011", "3/29/2011"];
var RangeDatesIsDisable = true;
function DisableDays(date) {
    var isd = RangeDatesIsDisable;
    var rd = RangeDates;
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();
    for (i = 0; i < rd.length; i++) {
        var ds = rd[i].split(',');
        var di, df;
        var m1, d1, y1, m2, d2, y2;

        if (ds.length == 1) {
            di = ds[0].split('/');
            m1 = parseInt(di[0]);
            d1 = parseInt(di[1]);
            y1 = parseInt(di[2]);
            if (y1 == y && m1 == (m + 1) && d1 == d) return [!isd];
        } else if (ds.length > 1) {
            di = ds[0].split('/');
            df = ds[1].split('/');
            m1 = parseInt(di[0]);
            d1 = parseInt(di[1]);
            y1 = parseInt(di[2]);
            m2 = parseInt(df[0]);
            d2 = parseInt(df[1]);
            y2 = parseInt(df[2]);

            if (y1 >= y || y <= y2) {
                if ((m + 1) >= m1 && (m + 1) <= m2) {
                    if (m1 == m2) {
                        if (d >= d1 && d <= d2) return [!isd];
                    } else if (m1 == (m + 1)) {
                        if (d >= d1) return [!isd];
                    } else if (m2 == (m + 1)) {
                        if (d <= d2) return [!isd];
                    } else return [!isd];
                }
            }
        }
    }
    return [isd];
}

Esta función conlleva dos parametros a configurar.

“RangeDates”: Este parámetro acepta Arrays de String los cuales contienen los rangos de fechas o fechas en especifico que deshabilitara el Datepicker, las fechas deben de ir en formato “MM/dd/yyyy”, los rangos de fecha inicial y fecha final van separados por coma, las fechas especificas van individual.

“RangeDatesIsDisable”: Este parámetro acepta un booleano que indica si las fechas especificadas en el “RangeDates” son las que se deshabilitan (true), o (false) si se requiere que todas las demas fechas se deshabiliten excepto las indicadas en el “RangeDates”.

Esta función es especificada en el evento del Datepicker llamado “beforeShowDay”, ejemplo:
$('#txtFecha').datepicker({
    maxDate: 0,
    minDate: null,
    beforeShowDay: DisableDays
});

Solo incluyen la funcion “DisableDays” en la página donde lo requieran y modifican las fechas.

Tambien les déjo la versión minimizada para que la utilicen en el deployment.
//Autor: Benjamin G. Viloria M. 2010
//The first date is the initial range and the second is the final range
//If only one date is specified, it's taken as a holiday
var RangeDates=["2/2/2011, 2/10/2011","2/12/2011, 2/20/2011","4/20/2011, 5/15/2011","3/29/2011"];var RangeDatesIsDisable=true;
function DisableDays(date){var isd=RangeDatesIsDisable;var rd=RangeDates;var m=date.getMonth();var d=date.getDate();var y=date.getFullYear();for(i=0;i<rd.length;i++){var ds=rd[i].split(",");var di,df;var m1,d1,y1,m2,d2,y2;if(ds.length==1){di=ds[0].split("/");m1=parseInt(di[0]);d1=parseInt(di[1]);y1=parseInt(di[2]);if(y1==y&&m1==m+1&&d1==d)return[!isd]}else if(ds.length>1){di=ds[0].split("/");df=ds[1].split("/");m1=parseInt(di[0]);d1=parseInt(di[1]);y1=parseInt(di[2]);m2=parseInt(df[0]);d2=parseInt(df[1]);y2=parseInt(df[2]);if(y1>=y||y<=y2)if(m+1>=m1&&m+1<=m2)if(m1==m2){if(d>=d1&&d<=d2)return[!isd]}else if(m1==m+1){if(d>=d1)return[!isd]}else if(m2==m+1){if(d<=d2)return[!isd]}else return[!isd]}}return[isd]};
18/2/2011 06:22:27 am

Realice cambios a la versión anterior que se conocía, gracias a "RR" por darse cuenta de que la función no contemplaba los rangos de fecha del mismo mes.

RR dijo:
"Saludos y Muchas gracias por tomarte el tiempo para este codigo...
Pero tengo que decirte que tengo problemas tecnicos con él, me explico: Funciona perfecto con rangos de fechas de diferentes meses pero para rangos del mismo mes no se detiene el selector en el dia de la fecha final, sino que sigue todo el mes y deshabilita todo el mes desde la fecha de inicio...
Queria corregirlo y enviartelo pero no lo he logrado asi que si puedes ayudarme te lo agradezco...
Gracias"

Reply

Your comment will be posted after it is approved.


Leave a Reply.