4

我正在使用jQuery datepicker来选择日期。它工作正常,除了我想更改 1 个默认行为。当您选择一天时,所选日期会突出显示(我喜欢)。当天也突出显示,但使用不同的 css 样式(我也喜欢)。但是,如果您选择当天,突出显示因为它是当天取代它被选择...我更希望它被选择取代当天的突出显示,我觉得这很清楚您已经选择了当天。

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

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

理想情况下,我可以使用 Datepicker 中内置的一些选项来实现我的目标,但到目前为止,似乎没有一个选项是正确的。我会满足于某种 JavaScript hack,或者 css 突然出现在页面中,但我现在不知所措。

4

4 回答 4

7

向您的页面添加额外的 CSS 文件绝对是首选方法。它易于管理并按照预期的方式使用 CSS!

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

IE

<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;
}

迈克的注意事项:

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

.ui-datepicker-today .ui-state-active {
  border: 1px solid #aaaaaa;
}
于 2009-04-08T18:24:16.540 回答
0

由于我花了一段时间才弄清楚如何在今天的风格之上准确地复制“选定”风格,即使有 PHPexperts.ca 的答案,这里有更多信息,如果你是遇到麻烦。

如果您选择“今天”以外的日期,则在选择“今天”时应复制的样式在a标签和选择器中

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

如果您安装了带有 Firebug 的 Firefox,这应该很容易找到(选择日期,重新打开日期选择器,右键单击并选择“检查元素”。

对于 jQuery UI 主题“UI 黑暗”,要复制到覆盖 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 种样式都会更改。

于 2010-08-17T20:28:06.583 回答
0

实际上,这很容易,只需将背景和边框元素添加!important.ui-state-active类中即可。

于 2011-12-19T18:09:01.603 回答
0
.ui-state-highlight {
    border: 1px solid #d3d3d3 !important;
    background-color: #e6e6e6 !important;
}
于 2017-09-18T23:02:53.417 回答