jQuery UI Datepicker：今天也被选中时不要突出显示答案

【问题标题】：jQuery UI Datepicker: don't highlight today when it is also selectedjQuery UI Datepicker：今天也被选中时不要突出显示
【发布时间】：2010-10-18 09:03:20
【问题描述】：

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

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

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

理想情况下，我可以使用 Datepicker 中内置的一些选项来实现我的目标，但到目前为止，似乎没有一个选项是正确的。我会接受某种 JavaScript hack，或者将 css 放入页面，但我现在无所适从。

【问题讨论】：

标签： javascript jquery css datepicker

【解决方案1】：

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

您需要将覆盖 CSS 放在任何先前加载的基本 jQuery 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;
}

迈克的说明：

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

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

【讨论】：

这似乎工作得很好，正是我想要的！谢谢！
真的吗？这并不能回答没有突出显示今天和突出显示当前选择的问题。即使使用 !important，背景似乎也没有改变，因为还有其他类在起作用。还有，我不知道未选中的样式是什么。

【解决方案2】：

由于我花了一段时间才弄清楚如何在今天的风格之上准确复制“选定”风格，即使有 PHPexperts.ca 的答案，这里有更多信息可能会让它更简单，如果你有麻烦了。

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

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

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

对于 jQuery UI 主题“UI dark”，要复制到覆盖 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】：

其实很简单，只需将!important添加到.ui-state-active类中，作为背景和边框元素。

【讨论】：

【解决方案4】：

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

【讨论】：