jQuery 如何更改引导程序日期选择器的选定日期颜色背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35740274/
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 bootstrap datepicker's selected date color background?
提问by kavigun
I am trying to change the color of selected date in bootstrap datepicker and tried changing the background color of datepicker container but there seems to be no options available to change and customize.
我正在尝试更改 bootstrap datepicker 中所选日期的颜色并尝试更改 datepicker 容器的背景颜色，但似乎没有可用于更改和自定义的选项。
Please let me know if anything available to customize the calendar design.
请让我知道是否有任何可用于自定义日历设计的内容。
$('#date_of_completion').datepicker({
format: 'dd/mm/yyyy',
autoclose: true
});
回答by acrobat
You have 2 possibilities to do this
你有 2 种可能性来做到这一点
1) Compile your own style based on the projects less files and override the background color in less:
1）根据项目less文件编译自己的样式并在less中覆盖背景颜色：
This is the class you should override
这是您应该覆盖的类
&.active,
&.active.highlighted {
.button-variant(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
2) Override the compiled css class
2）覆盖编译好的css类
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
background-color: green;
}
See the example
看例子
回答by Gonzalo Contreras
you can override this class:
你可以覆盖这个类：
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-image: linear-gradient(to bottom, #color, #color);
}
回答by K. Jones
In my setup using Django Bootstrap Datepicker Plus, this solution changed my selected day, month, and year.
在我使用 Django Bootstrap Datepicker Plus 的设置中，此解决方案更改了我选择的日期、月份和年份。
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
background-color: #00ced1;
}
.datepicker table tr td span.active {
background-color: #00ced1;
}
回答by Bohdan Petrenko
Add styles:
添加样式：
for seleted day
对于选定的一天
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
background: rgb(44, 16, 15);
text-shadow: none;
}
for treangle in the bottom right corner of actual date if selected another date
如果选择了另一个日期，则用于实际日期右下角的三角形
.bootstrap-datetimepicker-widget table td.today:before {
border-bottom-color: rgba(44, 16, 15, 1);
}
回答by Pranesh Janarthanan
Update the css class(datepicker.css: 70)
更新css类(datepicker.css: 70)
.datepicker td.active,
.datepicker td.active:hover
{
color: #ffffff;
background-color: #006dcc;
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
}
change the value "#0044cc" as required.
根据需要更改值“#0044cc”。
回答by bob
I am referring this demo:
我指的是这个演示：
check line no 519 of datepicker3.css
检查 datepicker3.css 的第 519 行
.datepicker table tr td.active:active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .open > .dropdown-toggle.datepicker table tr td.active, .open > .dropdown-toggle.datepicker table tr td.active.highlighted {
background-color: #285e8e;
border-color: #285e8e;
color: #ffffff;
}
Update or override css this in ur styles . for hover effects u need to update line no 529 of datepicker3.css.
在您的样式中更新或覆盖 css 。对于悬停效果，您需要更新 datepicker3.css 的第 529 行。
回答by Bishoy Bisahi
add css style
添加css样式
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover{
background-color: #337ab7;
color:#fff;
}
