jquery ui - 今天禁用并在接下来的3天内突出显示

时间:2014-01-08 18:03:28

标签: jquery-ui

到目前为止,我可以禁用今天的日期,但我很快就试图强调接下来的3天

$( "#someDiv" ).datepicker({
    beforeShowDay: function( date ){
        //disable Sundays;
        return [date.getDay() != 0, '']
    },
    /* today is disabled */
    minDate: 1

});

...或者有没有办法将日期信息作为数据属性或类似的东西呈现给单个日元?

1 个答案:

答案 0 :(得分:1)

return中,添加一个条件,检查您想要的日期范围,并为这些日期添加课程。

这是一个jsFiddle的完整示例。我确信这可以改进。

在条件为真时为日期添加背景的代码和CSS(按照您喜欢的方式设置样式):

.highlightDay .ui-state-default {
    background: #484;
    color: #FFF;
}

$(document).ready(function() {
    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            var newDate = addDays(new Date(), 0);
            var thirdDay = addDays(new Date(), 3);
            return [date.getDay() != 6, 
                // This can probably be improved
                date >= newDate && date <= thirdDay ? "highlightDay" : ""];
        },
        minDate: 1
    });
});

function addDays(theDate, days) {
    return new Date(theDate.getTime() + days*24*60*60*1000);
}