突出显示,禁用 jQuery UI 日期选择器中的特定日期

use*_*789 3 jquery datepicker jquery-ui-datepicker

在这里,我想实现以下目标

  1. 在日期选择器中突出显示所有假期
  2. 在日期选择器中禁用特定日期
  3. 在日期选择器中禁用特定周末

我分别有每个片段,但我想要全部在一起

小提琴:工作演示

突出假期

var holydays = ['10/17/2013', '10/18/2013', '11/2/2013'];

function highlightDays(date) {
    for (var i = 0; i < holydays.length; i++) {
        if (new Date(holydays[i]).toString() == date.toString()) {
            return [true, 'highlight'];
        }
    }
    return [true, ''];

}

$(function () {
    $("#dp").datepicker({
        minDate: 0,
        dateFormat: 'mm/dd/yy',
        inline: true,
        numberOfMonths: [1, 2],
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShowDay: highlightDays,
    });
});
Run Code Online (Sandbox Code Playgroud)

禁用特定日期

var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];
    function disableAllTheseDays(date) {
        var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
        for (i = 0; i < disabledDays.length; i++) {
            if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
                return [false];
            }
        }
        return [true];
    }
Run Code Online (Sandbox Code Playgroud)

禁用周末

$(function() {
        $( "#availability" ).datepicker({
            minDate: 0,
            dateFormat: 'mm/dd/yy',
            inline: true,
            numberOfMonths: [1, 2],
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            beforeShowDay: $.datepicker.noWeekends
        });
    });
Run Code Online (Sandbox Code Playgroud)

谁能帮我..

提前致谢。

小智 5

改变 :

$(function () {
    $("#dp").datepicker({
        minDate: 0,
        dateFormat: 'mm/dd/yy',
        inline: true,
        numberOfMonths: [1, 2],
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShowDay: setCustomDate // <-----change function
    });
});
Run Code Online (Sandbox Code Playgroud)

添加功能:

function setCustomDate(date) {
    var clazz = "";
    var arr1 = highlightDays(date);
    if (arr1[1] != "") clazz = arr1[1];

    var arr2 = disableAllTheseDays(date);
    var arr3 = $.datepicker.noWeekends(date);

    return [(!arr2[0] || !arr3[0]) ? false : true, clazz];
}
Run Code Online (Sandbox Code Playgroud)