使用 beforeShowDay 修改 jquery datepicker CSS答案

【问题标题】：Modify jquery datepicker CSS with beforeShowDay使用 beforeShowDay 修改 jquery datepicker CSS
【发布时间】：2010-11-22 09:44:27
【问题描述】：

我正在使用beforeShowDay 并将specialDay 课程分配给我日历中的特定日期；这很好用，但是我无法理解如何设置课程的样式以及主题滚轮的 css 是如何工作的。我试过了：

td .specialDate {
    background: #33CC66;
}

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

【问题讨论】：

标签： jquery css datepicker

【解决方案1】：

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

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

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

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

希望这能有所帮助！

【讨论】：

背景后面的“！important”标记非常重要。有谁知道为什么需要这个覆盖？如果我删除它，这些默认值仍然会出现。

【解决方案2】：

像这样创建你的 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, ''];
}

【讨论】：

【解决方案3】：

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

如果你想禁用透明效果

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

【讨论】：

【解决方案4】：

如果 ui 日历有主题，则必须禁用 specialDate 属性的background-image：

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

【讨论】：

【解决方案5】：

每当我使用 JQuery UI 时，我都会使用 Firebug 来检查应用于特定元素的任何样式，这将使您能够轻松识别需要使用哪些 CSS 元素。

【讨论】：

我使用firebug，我认为当前样式是从默认主题滚轮css应用的：.ui-state-default, .ui-widget-content .ui-state-default { -moz-背景剪辑：边框； -moz-background-inline-policy：连续； -moz-背景-原点：填充；背景：#75C8FF url(images/ui-bg_glass_75_75C8FF_1x400.png) 重复-x 滚动 50% 50%;边框：1px 实心#3A9EE0；颜色：#555555;字体粗细：正常；轮廓颜色：-moz 使用文本颜色；大纲样式：无；轮廓宽度：中等；那么我的问题是，如何修改已应用上述内容的 .specialDay 类的单元格？

【解决方案6】：

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

风格：

.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]
    }
});

【讨论】：

【解决方案7】：

使用点击你可以做所有你需要的CSS：

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

【讨论】：