在JQuery datePicker中通过beforeShowDay返回多个值

Question

我一直在尝试通过beforeShowDay 禁用多个日期，其中一些是日期，一些是星期几。

很遗憾，我只能禁用其中任何一个。

var unavailableDates = ["2/6/2020", "4/6/2020"];

beforeShowDay: function(date) {
    // Disabling Sundays
    var day = date.getDay();
    return [day != 0,''];
    // Disabling Dates Array
    findDate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
    if ($.inArray(findDate, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

PS，我需要默认禁用所有星期日，但只有在数组中找到日期。

Answer 1

请尝试下面的代码，其中我正在禁用数组中的日期以及向日期元素添加突出显示类。

<html>

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script>
        $(function () {
           var dateArray  = [ "2020-03-17", "2020-03-18","2020-03-20"];
            $("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd',
                beforeShowDay: function (date) {
                    var day = date.getDay();
                    // First convert all values in dateArray to date Object and compare with current date
                    var dateFound =  dateArray.find(function(item) {
                        var formattedDate = new Date(item);
                        return date.toLocaleDateString() === formattedDate.toLocaleDateString();
                    })
                     // check if date is in your array of dates
                    if(dateFound) {
                        // if it is return the following.
                        return [false, 'css-class-to-highlight', 'tooltip text'];
                    } else {
                        // default
                        // Disable all sundays
                        return [(day != 0), '', ''];
                    }

                }
            });

        });
    </script>
    <style type="text/css">
       

        .css-class-to-highlight a{
           background-color: blue !important;
           color: #fff !important;
        }
    </style>
</head>

<body>
    <form>
        <div>
           <div id="datepicker"></div>
        </div>
    </form>
</body>

</html>