使用beforeShowDay修改jquery datepicker CSS

时间:2009-08-24 20:04:16

标签: jquery css datepicker

我正在使用beforeShowDay,并已将班级specialDay分配到我日历中的特定日期;这工作正常,但我无法理解如何设置类的样式以及主题滚动的css如何正常工作。我试过了:

td .specialDate {
    background: #33CC66;
}

但这对日历的外观没有影响。有什么想法吗?

7 个答案:

答案 0 :(得分:15)

我有同样的问题,幸运的是我找到了答案。 当您禁用一天(设置为“false”)时,有效的是指定一个类(“.specialDate”)来更改背景颜色,但是如果日期已启用则不会,因为我们有另一个样式的锚点(“a”)覆盖分配给“td”锚点的类。

因此,如果您的日期已启用选择并想要更改样式,则必须编辑继承的“a”锚点,如下所示:

.specialDate a { background: #33CC66 !important; }

添加“!important ”(如果您原谅重复)指示以覆盖其他设置非常重要。

希望这有帮助!

答案 1 :(得分:4)

像这样创建你的css样式:

<style type="text/css">
    td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a { 
    background: none !important;
    background-color: #fffac2 !important; 
    color: #006633;
    }
</style>

然后使用beforeShowDay选项将您的样式添加到日历。

$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);


// ------------------------------------------------------------------
// highlightDays
// ------------------------------------------------------------------
function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
        if (SOME CONDITION TO DETERMIN SPECIAL DAY) {
            return [true, 'specialDay'];
        }
    }
    return [true, ''];
}

答案 2 :(得分:1)

.specialDate span {background-color:#ff0000!important;}

如果要禁用透明效果

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important}

答案 3 :(得分:1)

如果ui日历有主题,则必须为specialDate属性禁用background-image

.specialDate a { 
    background-image: none !important;
    background: #33CC66 !important;
}

答案 4 :(得分:0)

每当我使用JQuery UI时,我会使用Firebug检查应用于特定元素的任何样式,这样您就可以轻松识别需要使用的CSS元素。

答案 5 :(得分:0)

这里有一些突出显示当前日期或相关文本框中的日期。

风格:

.dateHighlight a { background: #58585a !important; }

剧本:

var pickerDate;
$("#pickerId").datepicker({
    // get the date to be highlighted; use today if no date
    beforeShow: function() {
        pickerDate = $("#pickerId").datepicker("getDate");
        if (pickerDate == null) pickerDate = new Date((new Date()).setHours(0, 0, 0, 0));
    },
    // add css class to the date
    beforeShowDay: function(date) {
        if (date.getTime() == pickerDate.getTime()) {
            return [true, 'dateHighlight', '']
        }
        return [true]
    }
});

答案 6 :(得分:0)

点击即可使用您需要的所有CSS:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');