Prevent Users from Selecting Weekends using jQuery UI DatePicker

Not known to many, jQuery UI DatePicker has a built-in function called 'noWeekends', that prevents users from selecting weekends, by disabling them.

Here’s how to use it

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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: $.datepicker.noWeekends }
            );
        });
    </script>
</head>
<body>
  <input id="datepic"/>
</body>
</html>

OUTPUT

As you can observe, the weekends are disabled.

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.

Prevent Users from Selecting Weekends using jQuery UI DatePicker

About The Author

1 comment:

Labels