How to change bootstrap datepicker's selected date color background?

问题

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.

Please let me know if anything available to customize the calendar design.

 $('#date_of_completion').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true
    });

回答1:

You have 2 possibilities to do this

1) Compile your own style based on the projects less files and override the background color in 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);
}

See datepicker3.less line 170

2) Override the compiled css class

.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

回答2:

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);
    }

回答3:

Update the css class(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.

回答4:

I am referring this demo :

check line no 519 of datepicker3.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, .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.

回答5:

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);
}

回答6:

In my setup using Django Bootstrap Datepicker Plus, this solution changed my selected day, month, and year.

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background-color: #00ced1;
}
.datepicker table tr td span.active {
  background-color: #00ced1;
}

回答7:

add css style

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover{
    background-color: #337ab7; 
    color:#fff;
}

来源：https://stackoverflow.com/questions/35740274/how-to-change-bootstrap-datepickers-selected-date-color-background

标签

jquery

bootstrap-datepicker