jQuery UI DatePicker:覆盖今天的css

时间:2022-06-18 20:34:23

I am using beforeShowDay to highlight special days in my jQuery datepicker. The only way I am able to change the background is to use the '!important' tag in my css class. This works perfectly for all days except 'today'. The css does not change the background color, only the border.

我正在使用beforeShowDay来突出我的jQuery datepicker中的特殊日子。我能够改变背景的唯一方法是在我的css类中使用'!important'标签。除了'今天'之外,这适用于所有日子。 css不会改变背景颜色,只改变边框。

my css:

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

2 个解决方案

#1


You could try qualifying the selector further.

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

For example:

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

If that works you may be able to remove the other !important, which is worth avoiding as it's a bit of an antipattern.

如果它有效,你可以删除另一个!important,这是值得避免的,因为它有点像反模式。

#2


I found this here... might be of some help to you.

我在这里找到了......可能对你有所帮助。

Why don't u use datepickers functionality to highlight special days? I use an inline datepicker as well and showing special days works just fine. I use something similar to:

为什么不使用datepickers功能突出特殊日子?我也使用内联日期选择器,并显示特殊日期工作正常。我使用类似的东西:

$("#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 is my array with special days in this month e.g. [3, 12, 24]. "specialDate" is the CSS class name datepicker will add to the special days, so you can make them look anyway you want

specialsDays是我的数组,本月有特殊日子,例如[3,12,24]。 “specialDate”是特殊日期中添加的CSS类名称datepicker,因此无论如何你都可以让它们看起来像你想要的那样

#1


You could try qualifying the selector further.

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

For example:

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

If that works you may be able to remove the other !important, which is worth avoiding as it's a bit of an antipattern.

如果它有效,你可以删除另一个!important,这是值得避免的,因为它有点像反模式。

#2


I found this here... might be of some help to you.

我在这里找到了......可能对你有所帮助。

Why don't u use datepickers functionality to highlight special days? I use an inline datepicker as well and showing special days works just fine. I use something similar to:

为什么不使用datepickers功能突出特殊日子?我也使用内联日期选择器,并显示特殊日期工作正常。我使用类似的东西:

$("#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 is my array with special days in this month e.g. [3, 12, 24]. "specialDate" is the CSS class name datepicker will add to the special days, so you can make them look anyway you want

specialsDays是我的数组,本月有特殊日子,例如[3,12,24]。 “specialDate”是特殊日期中添加的CSS类名称datepicker,因此无论如何你都可以让它们看起来像你想要的那样