Search This Blog

Sunday, May 20, 2012

jQuery UI DatePicker Disable/Enable Specified Dates


We all are familiar with jQuery UI DatePicker, it have many options to customize the functionality. Instead of that we can be able to use or modify some of the values/params. Some times we want to disable/enable some days in datepicker, jQuery doesn’t  have any direct optional values for that. Here I’m mentioning the usage of beforeShowDayparam in datepicker. 
The basic usage of the datepicker is $(selector).datepicker(); ifyou want to use params then $(‘#datepicker’).datepicker({minDate: new Date(2010, 10, 27), dateFormat: ‘mm/dd/yy’,}); beforeShowDay param will accept the a function and it pass each date to the function before its shown to the UI datepicker panel. So if the function return true then the date will active otherwise its disabled. :)by the help of this params we can enable or disable the dates. You can use some of the simple methods which I’m gonna describe below.

jQuery files

Simple datepicker

01
$("#datepicker").datepicker();

Disable all dates till today

01
02
03
04
05
06
07
08
09
// get the current date
var date = new Date();
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
 
// Disable all dates till today
$('#datepicker2').datepicker({
        minDate: new Date(y, m, d),
        dateFormat: 'mm-dd-yy',
});

Disable all dates from today

01
02
03
04
05
// Disable all dates from today
$('#datepicker3').datepicker({
        maxDate: new Date(y, m, d),
        dateFormat: 'mm-dd-yy',
});

Disable all weekends

01
02
03
04
05
// Disable all weekends
$('#datepicker4').datepicker({
        dateFormat: 'mm-dd-yy',
        beforeShowDay: $.datepicker.noWeekends
});

Disable a list of dates

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// Disable a list of dates
var disabledDays = ["9-21-2010", "9-24-2010", "9-27-2010", "9-28-2010", "9-3-2010", "9-17-2010", "9-2-2010", "9-3-2010", "9-4-2010", "9-5-2010"];
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}
$('#datepicker5').datepicker({
        dateFormat: 'mm-dd-yy',
        beforeShowDay: disableAllTheseDays
});

Enable a list of dates

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// Enable a list of dates
var enabledDays = ["9-21-2010", "9-24-2010", "9-27-2010", "9-28-2010", "9-3-2010", "9-17-2010", "9-2-2010", "9-3-2010", "9-4-2010", "9-5-2010"];
function enableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < enabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1) {
            return [true];
        }
    }
    return [false];
}
$('#datepicker6').datepicker({
        dateFormat: 'mm-dd-yy',
        beforeShowDay: enableAllTheseDays
});

Disable a range of dates

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Disable a range of dates
var disabledDaysRange = [["9-1-2010 to 9-6-2010", "9-10-2010 to 9-15-2010", "10-27-2010 to 10-30-2010"], '9-17-2010'];
function disableRangeOfDays(d) {
    for(var i = 0; i < disabledDaysRange.length; i++) {
        if($.isArray(disabledDaysRange[i])) {
            for(var j = 0; j < disabledDaysRange[i].length; j++) {
                var r = disabledDaysRange[i][j].split(" to ");
                r[0] = r[0].split("-");
                r[1] = r[1].split("-");
                if(new Date(r[0][2], (r[0][0]-1), r[0][1]) <= d && d <= new Date(r[1][2], (r[1][0]-1), r[1][1])) {
                    return [false];
                }
            }
        }else{
            if(((d.getMonth()+1) + '-' + d.getDate() + '-' + d.getFullYear()) == disabledDaysRange[i]) {
                return [false];
            }
        }
    }
    return [true];
}
$('#datepicker7').datepicker({
        dateFormat: 'mm-dd-yy',
        beforeShowDay: disableRangeOfDays
});

Enable a range of dates

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Enable a range of dates
var disabledDaysRange = [["9-1-2010 to 9-6-2010", "9-10-2010 to 9-15-2010", "10-27-2010 to 10-30-2010"], '9-17-2010'];
function disableRangeOfDays(d) {
    for(var i = 0; i < disabledDaysRange.length; i++) {
        if($.isArray(disabledDaysRange[i])) {
            for(var j = 0; j < disabledDaysRange[i].length; j++) {
                var r = disabledDaysRange[i][j].split(" to ");
                r[0] = r[0].split("-");
                r[1] = r[1].split("-");
                if(new Date(r[0][2], (r[0][0]-1), r[0][1]) <= d && d <= new Date(r[1][2], (r[1][0]-1), r[1][1])) {
                    return [true];
                }
            }
        }else{
            if(((d.getMonth()+1) + '-' + d.getDate() + '-' + d.getFullYear()) == disabledDaysRange[i]) {
                return [true];
            }
        }
    }
    return [false];
}
 
$('#datepicker8').datepicker({
        dateFormat: 'mm-dd-yy',
        beforeShowDay: disableRangeOfDays
});

Enable only Friday

01
02
03
04
05
06
07
08
09
10
11
// Enable only Friday
$("#datepicker9").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 1,
    beforeShowDay: enableFirday
});
// Custom function to enable friday only in jquery calender
function enableFirday(date) {
    var day = date.getDay();
    return [(day == 5), ''];
}
Note: All the above function works well with the dateformat mm-dd-yy. But you can change the values in the function mainly in this line (m+1) + ‘-’ + d + ‘-’ + y. Replace the – with your char usage the same dateformat in all the arrays and functions. Have fun :P
Posted by Dhinesh at
Labels: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)