Disable Certain Days In a Week using jQuery UI DatePicker

A couple of days ago, I had posted on Prevent Users from Selecting Weekends using jQuery UI DatePicker

Dominic mailed asking if it was possible to do this without using the built-in function 'noWeekends'. He wanted to disable Tuesdays and Fridays of every week in the DatePicker. Here’s how to achieve the same:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Disable Certains Days in a Week using jQuery UI DatePicker</title>
<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/
ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script  type="text/javascript" src="http://ajax.microsoft.com/ajax/
jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.8.2/jquery-ui.min.js"></script>


<script type="text/javascript">
    $(function() {
        $("#datepic").datepicker(
        { beforeShowDay: function(day) {
            var day = day.getDay();
            if (day == 2 || day == 5) {
                return [false, "somecssclass"]
            } else {
                return [true, "someothercssclass"]
            }
        }
        });
    });
</script>
</head>
<body>
<input id="datepic"/>
</body>
</html>

OUTPUT

See a Live Demo

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Anonymous said...: Hi Suprotim,

Your code posted in the code is incorrect. Instead of
if (day == 2 day == 5) {
it should be
if (day == 2 || day == 5) {.

I have found another solution on http://jquerybyexample.blogspot.com/2010/07/disable-specific-days-in-jquery.html.

However your jsCodebin code is correct.; July 16, 2010 at 9:04 PM
Suprotim Agarwal said...: As you may have guessed, blogger does not escape the || characters, hence you are not able to see it in the post. You have to manually specify &# 124;; July 16, 2010 at 10:22 PM