Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery UI Datepicker beforeShowDay Option

  • Last Updated : 02 Dec, 2021

The jQuery UI beforeShowDay is an option in Datepicker. By using this option we can call any function by using each day. This is executed before showing the calendar.

We don’t want some days to be selected by users (say all tickets for that day is sold-out) then we can apply this option and disable the days for selection by the user. The beforeShowDay runs a function by passing each day as a parameter. We will use the CDN link in code to add different libraries and styles. To display this function like any other jQuery UI widget, we have to link to jQuery and jQuery UI. Copy this code inside your HTML file to link our file to jquery and jquery UI through CDN(Content Delivery Network). Here we have used google’s CDN but you can also use jquery or Microsoft’s CDN

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

<link href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’rel=’stylesheet’>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>



<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>

Let us create one array in javascript having elements of days that are not available. In the below, code 9/12/2019 and 13/12/2019 are not available whereas the remaining dates are available. We have used the function beforeShowDay:my_check to execute the javascript code to return True or False based on dates mentioned in the array. Before showing the calendar each day is passed through this function and based on the return value the date is displayed.

Example 1:




<!DOCTYPE html>
<html>
<head>
    <link href=
         rel='stylesheet'>
    <script src=
    </script>
    <script src=
          
    </script>
    <style>
        h1{
            color:green;
        }
        .ui-datepicker {
            width: 12em;
        }
  
          
  
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>jQuery UI beforeShowDay</h4>
    Start Date:
    <input type="text" id="my_date_picker1">
    <script>
        $(document).ready(function() {
            ////////
            $(function() {
                $("#my_date_picker1").datepicker({
                    dateFormat: 'dd-mm-yy',
                    defaultDate: "02-12-2019",
                    beforeShowDay: my_check
  
                });
            });
  
            function my_check(in_date) {
                in_date = in_date.getDate() + '/'
                + (in_date.getMonth() + 1) + '/' + in_date.getFullYear();
                var my_array = new Array('9/12/2019', '13/12/2019');
                //$('#d1').append(in_date+'<br>')
                if (my_array.indexOf(in_date) >= 0) {
                    return [false, "notav", 'Not Available'];
                } else {
                    return [true, "av", "available"];
                }
            }
        })
    </script>
  
</body>
</html>

Output:

Blocking a particular day: We can choose to block a particular weekday in the calendar. Which will disable the weekday permanently and make it unavailable for selection for any week. Throughout the calendar. In the below example we have chosen to disable Sunday.

Example 2:




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        h1 {
            color: green;
        }
          
        .ui-datepicker {
            width: 12em;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>jQuery UI beforeShowDay</h4> Start Date:
        <input type="text" id="my_date_picker1">
        <script>
            $(document).ready(function() {
                $(function() {
                    $("#my_date_picker1").datepicker({
                        dateFormat: 'dd-mm-yy',
                        beforeShowDay: my_check
                    });
                });
  
                function my_check(in_date) {
                    if (in_date.getDay() == 0) {
                        return [false, "notav", 'Not Available'];
                    } else {
                        return [true, "av", "available"];
                    }
                }
            })
        </script>
   </center>
</body>
  
</html>

Output:

More complex filtrations: Now we will try to filter out all second Saturdays also along with all Sundays. We can do this by using the code below.
Identifying Second Saturdays Here is the logic behind identifying a second Saturday in any given month. Firstly, we identify the first day of the month and its weekday(Sunday is 0, Monday is 1 and so on..) 14-(The weekday number of the first day of the month) gives us the date of the 2nd Saturday of the month. Similar logic has been used in the below code.

Example 3:




<!DOCTYPE html>
<html>
<head>
    <link href=
          rel='stylesheet'>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        h1 {
            color: green;
        }
          
        .ui-datepicker {
            width: 12em;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>jQuery UI beforeShowDay</h4> Start Date:
        <input type="text" id="my_date_picker1">
        <div id=d1></div>
        <script>
            $(document).ready(function() {
                $(function() {
                    $("#my_date_picker1").datepicker({
                        dateFormat: 'dd-mm-yy',
                        beforeShowDay: my_check
                    });
                });
  
                function my_check(in_date) {
                    var firstDay = new Date(in_date.getFullYear(), 
                                               in_date.getMonth(), 1);
                    var saturday2 = 14 - firstDay.getDay()
                    if (in_date.getDay() == 0 || 
                                      in_date.getDate() == saturday2) {
                        return [false, "notav", 'Not Available'];
                    } else {
                        return [true, "av", "available"];
                    }
                }
  
            })
        </script>
    </center>
</body>
  
</html>

Output:

Similarly, we can disable the 2nd and 4th Saturdays also. Here is the code to disable Sunday, 2nd Saturday and 4th Saturday.




function my_check(in_date) {
            var firstDay = new Date(in_date.getFullYear(), in_date.getMonth(), 1);
            var saturday2 = 14 - firstDay.getDay()
            var saturday4 = 28 - firstDay.getDay()
            if (in_date.getDay() == 0 || in_date.getDate() == saturday2 
                                      || in_date.getDate() == saturday4) {
                return [false, "notav", 'Not Available'];
            } else {
                return [true, "av", "available"];
            }



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!