Jquery突出显示具有不同颜色的保留日期单元格

Question

我有要求突出显示数据库中可用的日期，我已编写以下代码，但这不能按预期工作

<style type="text/css">
    .Highlighted a {
        background-color: Red !important;
        background-image: none !important;
        color: White !important;
    }
</style>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<asp:CheckBox ID="chkWeekend" runat="server" />
<asp:TextBox ID="txtSelectedDate" runat="server"></asp:TextBox>
<script type="text/javascript">
    var reserveddates;
    var weekenddate;
    function DisableSpecificDates(date) {

        var month = '' + (date.getMonth() + 1),
            day = '' + date.getDate(),
            year = date.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        var currentdate = [year, month, day].join('-');

        for (var i = 0; i < reserveddates.length; i++) {
            if ($.inArray(currentdate, reserveddates) != -1) {
                return [false];
            }
        }

        if ($("input[id$='chkWeekend']").is(':checked')) { weekenddate = $.datepicker.noWeekends(date); }
        else {
            for (var i = 0; i < reserveddates.length; i++) {
                if ($.inArray(currentdate, reserveddates) == -1) {
                    return [false, "Highlighted"];
                }
            }
        }

        return weekenddate;

    }

    $(function () {

        reserveddates = []

        $.ajax({
            type: "POST",
            url: "WebForm2.aspx/GetDates",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var xml = $.parseXML(response.d);
                var dates = $(xml).find('Holiday_Date');
                $.each(dates, function () {
                    reserveddates.push($(this)[0].textContent.split('T')[0]);
                });
                $("input[id$='txtSelectedDate']").datepicker({
                    beforeShowDay: function (date) {
                        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                        return [true, "Highlighted", reserveddates.indexOf(string) == -1];
                    }
                });
            }
        });

        $("input[id$='chkWeekend']").change(function () {
            if ($("input[id$='chkWeekend']").is(':checked')) {
                $("input[id$='txtSelectedDate']").datepicker('option', { beforeShowDay: DisableSpecificDates })
            }
            else {
                $("input[id$='txtSelectedDate']").datepicker('option', { beforeShowDay: DisableSpecificDates })
            }
        })
    });
</script>

我得到的输出如下所有日期都突出显示

但是从我当前月份的数据库中只应突出显示16-05-2017

Answer 1

试用此代码

$(document).ready(function(){
availableDates = ['2017-05-22','2017-05-02'];
function DisableSpecificDates(date) {
    var day=date.getDate(),
    		month=date.getMonth()+1,
        year=date.getFullYear();
    if (month.toString().length < 2) month = '0' + month;
    if (day.toString().length < 2) day = '0' + day;
    var currentdate=[year, month, day].join('-');
    if(jQuery.inArray(currentdate, availableDates) !== -1){
				return [true, "Highlighted", ""];  
    }
    else{
				return [true, "", ""]; 
    }
}
function DisableSpecificDatesWeekends(date) {
    var day=date.getDate(),
    		month=date.getMonth()+1,
        year=date.getFullYear();
    if (month.toString().length < 2) month = '0' + month;
    if (day.toString().length < 2) day = '0' + day;
    var currentdate=[year, month, day].join('-');
    if(jQuery.inArray(currentdate, availableDates) !== -1){
				return [true, "Highlighted", ""];  
    } else if(date.getDay() === 0 || date.getDay() === 6) {
    	return [false, "disabled_week"]
    }
    else{
				return [true, "", ""]; 
    }
}
$("input[id='chkWeekend']").change(function () {
	$("input[id='txtSelectedDate']").datepicker("destroy");
if ($(this).is(':checked')) {
	$("input[id='txtSelectedDate']").datepicker({dateFormat: 'dd-mm-yy', beforeShowDay: DisableSpecificDatesWeekends });
}
else {
	$("input[id='txtSelectedDate']").datepicker({dateFormat: 'dd-mm-yy', beforeShowDay: DisableSpecificDates });
}
});
	$("input[id='txtSelectedDate']").datepicker({dateFormat: 'dd-mm-yy', beforeShowDay: DisableSpecificDates });
});

   .Highlighted a {
        background-color: Red !important;
        background-image: none !important;
        color: White !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<input type="checkbox" id="chkWeekend" />
<input id="txtSelectedDate" type="text" /><br />