【问题标题】:jQuery UI DatePicker: override today cssjQuery UI DatePicker:覆盖今天的 CSS
【发布时间】:2010-10-27 01:17:44
【问题描述】:

我使用 beforeShowDay 来突出显示我的 jQuery 日期选择器中的特殊日子。我能够更改背景的唯一方法是在我的 css 类中使用“!important”标签。这适用于除“今天”之外的所有日子。 css 不改变背景颜色,只改变边框。

我的css:

.genEvent a
{
border:solid 1px #DC143C !important;
background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
}

【问题讨论】:

    标签: jquery css user-interface datepicker overriding


    【解决方案1】:

    您可以尝试进一步限定选择器。

    例如:

    body contentDiv .genEvent a
    {
        border:solid 1px #DC143C !important;
        background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
    }
    

    如果可行,您也许可以删除另一个!important,这是值得避免的,因为它有点像antipattern

    【讨论】:

    • 值得一提的是,jQuery UI 使用了 .ui-datepicker-today 或 .ui-datepicker-currentDay - .ui-datepicker-currentDay.genEvent, .ui-datepicker-today.genEvent - jQuery datepicker css 也使用 !important - 所以你需要 !important 来克服它。
    【解决方案2】:

    我发现这个here...可能对你有一些帮助。

    你为什么不使用日期选择器 突出特殊的功能 天?我使用内联日期选择器作为 很好,展示特殊的日子作品 正好。我使用类似的东西:

    $("#mnu_calendar").datepicker({
      ... other options
      beforeShowDay: function(thedate) {
        var theday    = thedate.getDate();
        if( $.inArray(theday,specialDays) == -1 )
          return [true,""];
        return [true, "specialDate"];
      },
      ... more options
    });
    

    specialsDays 是我的特殊数组 本月的天数[3, 12, 24]。 “specialDate”是 CSS 类名 datepicker 将添加到特殊的 天,所以你可以让它们看起来 你想要的

    【讨论】:

    • 我正在使用 datepickers 功能来突出显示日期,就像上面的示例一样。在您的 specialDate 类中,您能否在今天的特殊日子覆盖背景?我意识到问题可能是我每天都使用 png 作为背景而不是颜色(作为背景的 png 来自 UI Themeroller 的主题)
    • 我没有使用它——正如我所说,我在网上找到了它。您是否尝试过将 CSS 类 datepicker_today 与 .genEvent 类结合使用?也许通过结合两者,你可以覆盖背景......
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-09-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-08-11
    • 2011-12-17
    相关资源
    最近更新 更多