jQuery UI | beforeShowDay

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

<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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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"];
            }

chevron_right




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.