我正在使用jQuery datepicker来选择日期.它工作正常,除了我想要更改1个默认行为.当您选择一天时,会突出显示所选日期(我喜欢).当天也突出显示,但使用不同的CSS样式(我也喜欢).但是,如果您选择当前日期,则突出显示,因为它是当前日取代它被选中…我更希望它被选中以取代当天的高亮显示,我觉得会很清楚您已选择当天.
现在,我觉得我可以更新css来解决我的问题.但是,我真的不想调整开箱即用的jQuery UI css,因为我想稍后将皮肤添加到我的应用程序中.这意味着如果我抓住一堆jQuery UI主题……然后我必须对它们进行相同的调整(非常不受欢迎).
我可以更新实际的Datepicker插件来执行此操作,但后来我遇到了如果我想稍后更新我的Datepicker的问题……我需要记住再次进行此修复.
理想情况下,我可以使用Datepicker中内置的一些选项来实现我的目标,但是到目前为止,没有一个选项似乎是正确的.我会满足于某种JavaScript黑客攻击,或css陷入页面,但我现在不知所措.
解决方法:
向页面添加额外的CSS文件肯定是首选方法.它易于管理,并按照预期的方式使用CSS!
在任何先前加载的基本jQuery CSS或任何主题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;
}