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

Question

I'm using the jQuery datepicker to select dates. 我正在使用jQuery datepicker来选择日期。 It works fine, except there is 1 default behavior that I would like to change. 它工作正常，除了我想要更改1个默认行为。 When you select a day, the selected day is highlighted (which I like). 当您选择一天时，会突出显示所选日期（我喜欢）。 The current day is also highlighted, but using a different css style (which I also like). 当天也突出显示，但使用不同的CSS样式（我也喜欢）。 However, if you select the current day, the highlighting because it is the current day supersedes it being selected... I would much prefer it being selected to supersede the current day highlight, which I feel would make it very clear that you have selected the current day. 但是，如果您选择当前日期，则突出显示，因为它是当前日取代它被选中...我更希望它被选中以取代当天的高亮显示，我觉得会很清楚您已选择当天。

Now, I feel I could probably update the css to solve my problem. 现在，我觉得我可以更新css来解决我的问题。 However, I really don't want to tweak the out-of-the-box jQuery UI css, because I want to later add skins to my app. 但是，我真的不想调整开箱即用的jQuery UI css，因为我想稍后将皮肤添加到我的应用程序中。 This means if I grab a bunch of the jQuery UI themes... I then have to make the same tweak on all of them (very undesirable). 这意味着如果我抓住一堆jQuery UI主题......然后我必须对它们进行相同的调整（非常不受欢迎）。

I could probably update the actual Datepicker plugin to do this as well, but then I run into the issue that if I want to update my Datepicker later on... I need to remember to make this fix again. 我可以更新实际的Datepicker插件来执行此操作，但后来我遇到了如果我想稍后更新我的Datepicker的问题......我需要记住再次进行此修复。

Ideally, I could use some option built into the Datepicker to accomplish my goal, but as of yet none of the options seem to be right. 理想情况下，我可以使用Datepicker中内置的一些选项来实现我的目标，但是到目前为止，没有一个选项似乎是正确的。 I would settle for some kind of JavaScript hack, or css plopped into the page, but I'm at a loss for ideas right now. 我会满足于某种JavaScript黑客攻击，或css陷入页面，但我现在不知所措。

Answer 1

Adding an additional CSS file to your page would definitely be the preferred method. 向页面添加额外的CSS文件肯定是首选方法。 It's easily managed and uses CSS the way it was intended to be used! 它易于管理，并按照预期的方式使用CSS！

You would need to place your override CSS in the head tag after any previously loaded base jQuery CSS or any theme CSS files in order to override their values. 在任何先前加载的基本jQuery CSS或任何主题CSS文件之后，您需要将覆盖CSS放在head标记中以覆盖它们的值。 (You could also increase the specificity of the default tag, referencing a class or ID in your specific instance.) （您还可以增加默认标记的特异性，引用特定实例中的类或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>

The "your_override_css" file would simply contain: “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;
}

Note from Mike: 迈克的说明：

I ended up finding out that there is a td around the anchors that represent the days, and the td also has the "today" information... so despite there not being a cross-browser way to select an item that has multiple classes (that I've found), the following will work in this case, in a new file just as PHPexperts.ca describes: 我最终发现代表日子的锚点周围有一个td，td也有“今天”信息......所以尽管没有跨浏览器方式来选择具有多个类的项目（我已经找到了），在这种情况下，以下内容将在新文件中工作，就像PHPexperts.ca描述的那样：

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

Answer 2

Since it took me a while to figure out how to exactly replicate the "selected" style over top of the today style even with the answer from PHPexperts.ca, here's a bit more information that might make it a bit more straightforward if you're having trouble. 因为我花了一段时间才弄清楚如何在今天的风格之上完全复制“选定”的风格，即使是PHPexperts.ca的答案，这里有更多的信息可能会让你更直接，如果你是遇到麻烦。

If you select a day other than "today", the style that you should copy for an identical look when "today" is selected is in the a tag and in the selector 如果选择“今天”以外的其他日期，则在选择“今天”时应复制相同外观的样式位于a标签和选择器中

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

This should be easy to find if you have Firefox with Firebug installed (select the date, reopen the datepicker, right click and select 'inspect element'. 如果您安装了带Firebug的Firefox，则应该很容易找到（选择日期，重新打开datepicker，右键单击并选择'inspect element'。

For the jQuery UI theme 'UI darkness' the style to copy into your override css is 对于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; }

If you change the theme, it looks like all 3 of these styles change. 如果您更改主题，则看起来所有这3种样式都会发生变化。

Answer 3

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

Answer 4

实际上，它非常简单，只需对背景和border元素的.ui-state-active类添加!important 。

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

问题描述

4 个解决方案

解决方案1
7 已采纳 2009-04-08 18:24:16

解决方案2
0 2010-08-17 20:28:06

解决方案3
0 2017-09-18 23:02:53

解决方案4
0 2011-12-19 18:09:01

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

问题描述

4 个解决方案

解决方案1 7 已采纳 2009-04-08 18:24:16

解决方案2 0 2010-08-17 20:28:06

解决方案3 0 2017-09-18 23:02:53

解决方案4 0 2011-12-19 18:09:01

解决方案1
7 已采纳 2009-04-08 18:24:16

解决方案2
0 2010-08-17 20:28:06

解决方案3
0 2017-09-18 23:02:53

解决方案4
0 2011-12-19 18:09:01