Jquery DatePicker 更改突出显示的颜色在选择特定日期时

Jquery DatePicker change highlighted color onSelect of a particular date

本文关键字：选择 日期 颜色 DatePicker 显示 Jquery      更新时间：2023-09-26

我有我正在处理的Jquery日期选择器代码。我要做的是在单击任何其他日期时将当前突出显示日期的颜色更改为灰色，并将单击日期的颜色更改为绿色。

棘手的部分是，只有灰色的日期可以变成绿色和viceversa，但没有其他日期可以在点击时变成绿色。

我不明白我做错了什么。还是我的代码完全错误。如果有人可以帮忙。

这是代码

$(function() {
     var togo=['10/25/2013']
     var datesArray=['10/27/2013','10/28/2013']
     var datesArray1=['10/25/2013','10/26/2013']
     var datesArray2=['10/24/2013']

        $( "#datepicker" ).datepicker({
            numberOfMonths: 2,
            selectMultiple:true,
            beforeShowDay: function (date) {
                var theday = (date.getMonth()+1) +'/'+ 
                            date.getDate()+ '/' + 
                            date.getFullYear();
                    return [true,$.inArray(theday, datesArray2) >=0?"specialDate":($.inArray(theday, datesArray)>=0?"specialDate2":($.inArray(theday, datesArray1)>=0?"specialDate1":''))];
                },
            onSelect: function(date){
             console.log("clicked"+date);  
            return [true,$.inArray(date, togo) >=0?"specialDate":($.inArray(date, datesArray1)>=0?"specialDate1":'')] ;  
            }
        });
        //$.inArray(theday, datesArray) >=0?"specialDate":'specialDate1'
    });

为了更清楚地了解我在做什么和我想要什么，这里有一个JSFiddle

http://jsfiddle.net/pratik24/Kyt2w/3/

谢谢。

onSelect的行为不像beforeShowDay。 不能返回带有 [true/false, class, popup] 的数组。 相反，您必须在函数中手动应用该类。

我不确定你到底想做什么，但我会重新排列你的代码。 我用灰色日期做了一个数组，然后用绿色日期做了一个变量。 我从不更改数组，而是在单击时更新绿色日期，然后在datepicker上调用refresh：

$(function () {
    var togo = [ '10/25/2013' ];
    var redDates = [ '10/27/2013', '10/28/2013' ];
    var grayDates = [ '10/24/2013', '10/25/2013', '10/26/2013' ];
    var greenDate = '10/24/2013';

    $("#datepicker").datepicker({
        numberOfMonths: 2,
        selectMultiple: true,
        beforeShowDay: function (date) {
            var theday = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
            return [true, greenDate == theday ? "specialDate" : ($.inArray(theday, redDates) >= 0 ? "specialDate2" : ($.inArray(theday, grayDates) >= 0 ? "specialDate1" : ""))];
        },
        onSelect: function (dateStr) {
            var date = new Date(dateStr);
            var theday = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
            if ($.inArray(theday, grayDates) >= 0) {
                greenDate = theday;
            }
            $('#datepicker').datepicker("refresh");
        }
    });
});

我不确定togo是干什么用的，但这应该让你开始。

演示：http://jsfiddle.net/xU47h/3/

相关文章：