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

image

See a Live Demo

2 comments:

  1. AnonymousJuly 16, 2010 at 9:04 PM

    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.

    ReplyDelete
  2. Suprotim AgarwalJuly 16, 2010 at 10:22 PM

    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;

    ReplyDelete