jQuery UI Datepicker: don't highlight today when it is also selected

前端未结

关注

 4  876

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

相关标签:

4条回答

谎友^

2021-01-06 06:44
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!

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.)

i.e.
```
<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:
```
.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:
```
.ui-datepicker-today .ui-state-active {
  border: 1px solid #aaaaaa;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
北海茫月

2021-01-06 06:47

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.

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

.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'.

For the jQuery UI theme 'UI darkness' the style to copy into your override css is

.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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
我在风中等你

2021-01-06 06:57

Actually, it's quite easy, just add !important to the .ui-state-active class for the background and the border element.

0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2021-01-06 07:02

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

0 讨论(0)