jQuery UI Datepicker:当它也被选中时不要突出显示今天 [英] jQuery UI Datepicker: don't highlight today when it is also selected
问题描述
我正在使用 jQuery datepicker 来选择日期.它工作正常，除了我想更改 1 个默认行为.当您选择一天时，所选日期会突出显示(我喜欢).当天也突出显示，但使用不同的 css 样式(我也喜欢).但是，如果您选择当天，突出显示因为它是当天而不是被选择的...我更希望它被选择来取代当天的突出显示，我觉得这会让您很清楚您选择了当天.
I'm using the jQuery datepicker to select dates. It works fine, except there is 1 default behavior that I would like to change. 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). 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.
现在，我觉得我可以更新 css 来解决我的问题.但是，我真的不想调整开箱即用的 jQuery UI css，因为我想稍后将皮肤添加到我的应用程序中.这意味着如果我抓取一堆 jQuery UI 主题......然后我必须对所有这些主题进行相同的调整(非常不受欢迎).
Now, I feel I could probably update the css to solve my problem. 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. 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).
我可能也可以更新实际的 Datepicker 插件来执行此操作，但是后来我遇到了一个问题，如果我想稍后更新我的 Datepicker...我需要记住再次进行此修复.
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 中内置的一些选项来实现我的目标，但到目前为止，似乎没有一个选项是正确的.我会接受某种 JavaScript hack，或者将 css 放入页面，但我现在不知所措.
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. 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.
推荐答案
向页面添加额外的 CSS 文件肯定是首选方法.它易于管理并以预期的方式使用 CSS！
Adding an additional CSS file to your page would definitely be the preferred method. It's easily managed and uses CSS the way it was intended to be used!
您需要将覆盖 CSS 放在任何先前加载的基本 jQuery CSS 或任何主题 CSS 文件之后的 head 标签中，以便覆盖它们的值.(您还可以增加默认标签的特异性，在您的特定实例中引用类或 ID.)
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. (You could also increase the specificity of the default tag, referencing a class or ID in your specific instance.)
即
<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"文件将只包含:
The "your_override_css" file would simply contain:
.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 描述的那样，在一个新文件中:
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:
.ui-datepicker-today .ui-state-active {
border: 1px solid #aaaaaa;
}
这篇关于jQuery UI Datepicker:当它也被选中时不要突出显示今天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
