如何更改 jquery datepicker 的单元格颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2906266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the cell color of a jquery datepicker
提问by MazarD
I have a jquery datepicker and I need to be able to change the background color for the selected cell date. I'm trying with something like:
我有一个 jquery datepicker，我需要能够更改所选单元格日期的背景颜色。我正在尝试类似的东西：
$("#fecha").datepicker({
onSelect: function(value, date) {
alert(date.css());
}
});
hoping that the date parameter refers to the selected cell, but it doesn't seem to work.
希望日期参数指的是选定的单元格，但它似乎不起作用。
Any suggestion?
有什么建议吗？
//Edit: The solution should let me have different cells with different colors set dynamically, this is why I'm trying with onSelect instead of changing the CSS directly.
//编辑：解决方案应该让我动态设置不同颜色的不同单元格，这就是为什么我尝试使用 onSelect 而不是直接更改 CSS。
The purpose is to have a calendar with events established by the user.
目的是拥有一个包含用户建立的事件的日历。
Thanks in advance.
提前致谢。
回答by dan richardson
I think the best way (assuming i have understood you correctly) is to simply override the css.
In your site stylesheet or html head section you just need to override the following css selector
我认为最好的方法（假设我已经正确理解了你）是简单地覆盖 css。
在您的站点样式表或 html head 部分中，您只需要覆盖以下 css 选择器
.ui-datepicker-current-day .ui-state-active { background: #000000; }
EDIT
编辑
With your edit in mind, the following should work (assuming you can get the datepicker to stop refreshing)
考虑到您的编辑，以下应该有效（假设您可以让日期选择器停止刷新）
onSelect: function(value, date) {
date.dpDiv.find('.ui-datepicker-current-day a')
.css('background-color', '#000000');
}
回答by Gabriele Petrioli
change in your css the class .ui-datepicker-current-day
更改您的 css 类 .ui-datepicker-current-day
回答by Liko
In my case, i need to remove active class, so:
就我而言，我需要删除活动类，因此：
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
setTimeout(function(){
inst.dpDiv.find('.ui-datepicker-current-day a').removeClass('ui-state-active');
}, 50);
}
});
回答by Chad Kuehn
The datepicker by default follows your theme. But you can override anything.
默认情况下，日期选择器遵循您的主题。但是你可以覆盖任何东西。
ui-state-activeis the style of the date you select.
ui-state-highlightis the style it uses to identify the current date.
ui-state-active是您选择的日期的样式。
ui-state-highlight是用于标识当前日期的样式。
So do something like this:
所以做这样的事情：
#ui-datepicker-div .ui-state-active {color: #FFFFCC;}
#ui-datepicker-div .ui-state-highlight {color: #DCDCDC;}
You can rather add this css to the page or adjust the theme itself.
您可以将此 css 添加到页面或调整主题本身。
