FacebookTwitter

Disable Specific days jQuery UI Date Picker

By on Sep 5, 2014 in Intermediate, JavaScript, jQuery

Share On GoogleShare On FacebookShare On Twitter

Disable Specific days jQuery UI Date Picker

So I am currently working on a Calendar Plugin, and I have decided to us the very popular jQuery UI date picker for inputing anointments. jQuery UI date picker is a great tool that comes packed with tons of features. If you ever need a date picker this is definably a really good choice.

The Challenge

As I was working on this side project of mine, I encountered a challenge: I needed to disable specific days in jQuery UI date picker. Ideally, jQuery UI date picker will be use on my project for inputing appointments as I mentioned, and therefore it makes sense for it to only have the available days enabled. So I needed a way to disable just some specific dates in the date picker. I envisioned as passing an array with specific dates to be disabled as well as specific days (8/25/2014, 9/02/2014, etc…). This way you could disable specific dates such as national holidays and also specific days such as weekends. I was able to find some guidance on the web at StackOverflow which I used to work around this problem and create a solution.

The Solution

Disable Specific days jQuery UI Date Picker

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/** Days to be disabled as an array */
var disabledSpecificDays = ["9-21-2014", "9-24-2014", "9-25-2014", "10-01-2014"];
 
function disableSpecificDaysAndWeekends(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();
 
    for (var i = 0; i < disabledSpecificDays.length; i++) {
        if ($.inArray((m + 1) + '-' + d + '-' + y, disabledSpecificDays) != -1 || new Date() > date) {
            return [false];
        }
    }
 
    var noWeekend = $.datepicker.noWeekends(date);
    return !noWeekend[0] ? noWeekend : [true];
}
 
 
/** init datepicker */
$(document).ready(function () {
    $('#datepicker').datepicker({
        beforeShowDay: disableSpecificDaysAndWeekends
    });
});

You can view this in action by downloading the simple code from GitHub Demo.

Enmanuel Corvo

Enmanuel Corvo

Software Engineer at LiveAnswer
Enmanuel Corvo is a Software Engineer experienced in Web Applications Development. Huge fan of WordPress and an active plug-in author who enjoys writing code and blog posts about anything related to technology.
Enmanuel Corvo

Latest posts by Enmanuel Corvo (see all)