更改日期选择器上特定日期单元格背景颜色的正确方法

发布于 2024-12-29 07:42:44 字数 1434 浏览 3 评论 0原文

我在网上看到了很多答案 如何更改 jquery 日期选择器的单元格颜色 但由于某种原因,它们不适用于我的示例。

http://plungjan.name/test/datepicker_orange.html

我希望将整个单元格内容是橙色的,不仅仅是我们在单元格中的链接后面可以看到的

所以我可以看到

.ui-state-default {
  background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

它控制单元格内的链接,其类名由我设置为“橙色”,

<td class=" orange" onclick="DP_jQuery_1327604402271.datepicker._selectDay('#toDate',1,2012, this);return false;" title="Almost sold out">
<a class="ui-state-default" href="#">15</a>
</td>

其中橙色类是我在这段代码中给出的:

return [true,"orange","Almost sold out"];

它显示

在此处输入图像描述

而不是

在此处输入图像描述

如果我在 firebug 中删除上述 ui-state-default 的背景图像,我可以获得什么?

更改我现在使用 beforeShowDay 更改的单元格的完整单元格颜色的正确方法是什么?

我尝试通过覆盖默认值来帮助解决问题:

.ui-state-default {
  background-color: transparent;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

没有任何区别

I have seen many answers on the line of
How to change the cell color of a jquery datepicker
But they for some reason do not apply to my example.

http://plungjan.name/test/datepicker_orange.html

I want the WHOLE cell content to be orange, not just what we can see behind the link IN the cell

So what I can see as

.ui-state-default {
  background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

which controls the link inside the cell with a class name set by me to "orange"

<td class=" orange" onclick="DP_jQuery_1327604402271.datepicker._selectDay('#toDate',1,2012, this);return false;" title="Almost sold out">
<a class="ui-state-default" href="#">15</a>
</td>

where the orange class is given by me in this code:

return [true,"orange","Almost sold out"];

It shows

enter image description here

and not

enter image description here

Which I can get if I remove the background image of the above ui-state-default in firebug

What is the correct method of changing the complete cell color of the cells I now change using the beforeShowDay?

I tried helping the situation by overriding the default:

.ui-state-default {
  background-color: transparent;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

Did not make any diffence

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

薄凉少年不暖心 2025-01-05 07:42:44

@mplungjan 将 css 更改为:

td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

@mplungjan Change css to this:

td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}
要走就滚别墨迹 2025-01-05 07:42:44

如果你把你的类直接放在标签上,你必须将其更改为:

.ui-state-default {
  background: #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

在 CSS 中,如果你有背景图像和背景颜色,那么浏览器将向你显示图像,在本例中是你在第一个例子。

If you put your class directly on the tag you have to change it to this:

.ui-state-default {
  background: #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

In CSS if you have a backgorund image and a background color then the browser will show you the image which in this case is that gradient grey that you have in the first example.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文