jQuery UI Datepicker:当它也被选中时,今天不要突出显示 [英] jQuery UI Datepicker: don't highlight today when it is also selected

查看:58
本文介绍了jQuery UI Datepicker:当它也被选中时,今天不要突出显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 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黑客攻击,或者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!

您需要在任何先前加载的基本jQuery CSS之后将覆盖CSS放在head标记中任何主题CSS文件,以覆盖其值。 (您还可以增加默认标记的特异性,引用特定实例中的类或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.)

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>

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆