Question

我正在使用jQuery datepicker来选择日期。它工作正常，除了我想要更改1个默认行为。当您选择一天时，会突出显示所选日期（我喜欢）。当天也突出显示，但使用不同的CSS样式（我也喜欢）。但是，如果您选择当前日期，则突出显示，因为它是当前日取代它被选中...我更希望它被选中以取代当天的高亮显示，我觉得会很清楚您已选择当天。

现在，我觉得我可以更新css来解决我的问题。但是，我真的不想调整开箱即用的jQuery UI css，因为我想稍后将皮肤添加到我的应用程序中。这意味着如果我抓住一堆jQuery UI主题......那么我必须对它们进行相同的调整（非常不受欢迎）。

我可能会更新实际的Datepicker插件来执行此操作，但后来我遇到了如果我想稍后更新我的Datepicker的问题......我需要记住再次进行此修复。

理想情况下，我可以使用Datepicker中内置的一些选项来实现我的目标，但是到目前为止，没有一个选项似乎是正确的。我会讨论某种JavaScript黑客攻击，或者css陷入页面，但我现在对这些想法感到茫然。

Answer 1

向页面添加额外的CSS文件肯定是首选方法。它易于管理，并按照预期的方式使用CSS！

您需要在任何先前加载的基本jQuery CSS或任何主题CSS文件之后将覆盖CSS放在head标记中，以覆盖它们的值。（您还可以增加默认标记的特异性，引用特定实例中的类或ID。）

即

<head>
  <link href="base_jquery_css_file" rel="stylesheet"/>
  <link href="theme_jquery_css_file" rel="stylesheet"/>

  <link href="your_override_css" rel="stylesheet"/>
</head>

“your_override_css”文件只包含：

.ui-state-active, .ui-widget-content .ui-state-active {
  /*any CSS styles you want overriden i.e.*/
  border: 1px solid #999999;
  background-color: #EEEEEE;
}

Mike的说明：

我最终发现代表日子的锚点周围有一个td，td也有“今天”信息......所以尽管没有跨浏览器的方式来选择一个项目多个类（我发现），在这种情况下，以下将在新文件中工作，就像PHPexperts.ca描述的那样：

.ui-datepicker-today .ui-state-active {
  border: 1px solid #aaaaaa;
}

Answer 2

因为花了一段时间才弄清楚如何在今天的风格之上完全复制“选定”的风格，即使是PHPexperts.ca的答案，这里有更多的信息可能会让它更直接你遇到了麻烦。

如果选择“今天”以外的其他日期，则选择“今天”时应为相同外观复制的样式位于a标记和选择器中

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active

如果您安装了带Firebug的Firefox，则应该很容易找到（选择日期，重新打开日期选择器，右键单击并选择'inspect element'。

对于jQuery UI主题'UI darkness'，要复制到覆盖css的样式是

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:url("images/ui-bg_inset-soft_30_f58400_1x100.png") repeat-x scroll 50% 50% #F58400; border:1px solid #FFAF0F; color:#FFFFFF; }

如果更改主题，看起来所有这3种样式都会发生变化。

Answer 3

实际上，这很简单，只需将!important添加到.ui-state-active类中以获取背景和border元素。

Answer 4

.ui-state-highlight {
    border: 1px solid #d3d3d3 !important;
    background-color: #e6e6e6 !important;
}

jQuery UI Datepicker：当它也被选中时，今天不要突出显示

4 个答案: