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