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

Question

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

Answer 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

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

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

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

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

Answer 6

add css style

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