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

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

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

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

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

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

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

     

“your_override_css”文件只包含:

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

迈克的说明:

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

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

因为我花了一些时间来弄清楚如何在今天的风格之上完全复制“选定”的风格,即使是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种样式都会发生变化。

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

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