Question

我正在使用Jquery ui日历来显示12个月的日历。我目前正在使用以下方法禁用日期：

    var array = ["1/12/2016", "11/12/2016", "12/12/2016", "13/12/2016", "14/12/2016", "15/12/2016", "16/12/2016"];

使用：

    beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
        return [ array.indexOf(string) == -1 ]
    }

我需要禁用多个不同的日期范围，因此需要使用以下内容：

    var array = [ { "from": "2/12/2016", "to": "8/12/2016" }, { "from": "11/12/2016", "to": "16/12/2016" } ];

任何人都有任何想法如何做到这一点？试图在网上找到解决方案但没有任何乐趣 - 如果需要，我可以在JSfiddle上提供完整的代码。

先谢谢

Answer 1

要比较date函数的每次迭代中的beforeShowDay，您必须获得＆＃34; boudaries＆＃34; （每个禁用范围的from和to）并将其格式化为日期对象。

然后可以将其与迭代的date进行比较，该迭代已经是日期对象。

for循环会将date与您定义的每个范围进行比较，并返回true或false。

注意要返回第二个参数，即class要应用。
为了演示，我将red课程应用于禁用日期如果您不想对其应用特定的类，只需返回一个空字符串。

＆＃13;

// An array of objects containing disabled date ranges
var disabledArr = [ { "from": "2/12/2016", "to": "8/12/2016" }, { "from": "11/12/2016", "to": "16/12/2016" } ];


$("#calendar").datepicker({
    numberOfMonths: [4,3],
    
    // May be used to "force" the 12 months calendar to display 2016
    //minDate: new Date(2016, 1 -1, 1),
    //maxDate: new Date(2016, 12 -1, 31),

    beforeShowDay: function(date){
        //console.log(date);

        // For each calendar date, check if it is within a disabled range.
        for(i=0;i<disabledArr.length;i++){
            // Get each from/to ranges
            var From = disabledArr[i].from.split("/");
            var To = disabledArr[i].to.split("/");
            // Format them as dates : Year, Month (zero-based), Date
            var FromDate = new Date(From[2],From[1]-1,From[0]);
            var ToDate = new Date(To[2],To[1]-1,To[0]);

            // Set a flag to be used when found
            var found=false;
            // Compare date
            if(date>=FromDate && date<=ToDate){
                found=true;
                return [false, "red"]; // Return false (disabled) and the "red" class.
            }
        }
        
        //At the end of the for loop, if the date wasn't found, return true.
        if(!found){
            return [true, ""]; // Return true (Not disabled) and no class.
        }
    }
});

＆＃13;

.red span{
    background-color:red !important;
    color:white !important;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<div id="calendar"></div>

＆＃13;

以下是CodePen。

使用jquery ui日历禁用多个日期范围

1 个答案: