jQuery UI Datepicker beforeShowDay用法及代碼示例

jQuery 用戶接口演出日之前是一個選項日期選擇器。通過使用此選項，我們可以使用每天調用任何函數。這是在顯示日曆之前執行的。

我們不希望用戶選擇某些日期(假設該天的所有門票都是sold-out)，那麽我們可以應用此選項並禁用用戶選擇的日期。 beforeShowDay 通過將每一天作為參數傳遞來運行函數。我們將在代碼中使用CDN鏈接來添加不同的庫和樣式。要像任何其他 jQuery UI 小部件一樣顯示此函數，我們必須鏈接到 jQuery 和 jQuery UI。將此代碼複製到您的 HTML 文件中，以通過 CDN(內容分發網絡)將我們的文件鏈接到 jquery 和 jquery UI。這裏我們使用了google的CDN，但你也可以使用jquery或微軟的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>

讓我們在 JavaScript 中創建一個數組，其中包含不可用日期的元素。在下麵，代碼 9/12/2019 和 13/12/2019 不可用，而其餘日期可用。我們使用函數 beforeShowDay:my_check 執行 JavaScript 代碼，根據數組中提到的日期返回 True 或 False。在顯示日曆之前，每天都會通過此函數傳遞，並根據返回值顯示日期。

示例 1：


<!DOCTYPE html> 
<html> 
<head> 
    <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> 
    <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>

輸出：

阻止特定日期：我們可以選擇阻止日曆中的特定工作日。這將永久禁用工作日，並使其在任何一周都無法選擇。整個日曆。在下麵的示例中，我們選擇禁用星期日。

示例 2：


<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
    <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>

輸出：

更複雜的過濾：現在我們將嘗試過濾掉所有第二個星期六以及所有星期日。我們可以使用下麵的代碼來做到這一點。
確定第二個星期六以下是在任何給定月份中確定第二個星期六背後的邏輯。首先，我們確定該月的第一天及其工作日(星期日是 0，星期一是 1 等等..) 14-(該月第一天的工作日編號)給我們第二個星期六的日期這個月。下麵的代碼中使用了類似的邏輯。

示例 3：


<!DOCTYPE html> 
<html> 
<head> 
    <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> 
    <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>

輸出：

同樣，我們也可以禁用第二個和第四個星期六。這是禁用星期日、第二個星期六和第四個星期六的代碼。


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

相關用法

注：本文由純淨天空篩選整理自mayeshmohapatra大神的英文原創作品 jQuery UI Datepicker beforeShowDay Option。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。