CODEWITHSUNDEEP
jquerybootstrap-datepicker
kavigun
kavigun

Reputation: 2365

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

Upvotes: 4

Views: 36852

Answers (7)

K. Jones
K. Jones

Reputation: 35

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

Upvotes: 0

Gonzalo Contreras
Gonzalo Contreras

Reputation: 11

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

Upvotes: 1

Bohdan Petrenko
Bohdan Petrenko

Reputation: 1155

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

Upvotes: 2

acrobat
acrobat

Reputation: 2259

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

Upvotes: 5

Pawan B
Pawan B

Reputation: 4623

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.

Upvotes: 0

Pranesh Janarthanan
Pranesh Janarthanan

Reputation: 1194

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.

Upvotes: 0

Bishoy Bisahi
Bishoy Bisahi

Reputation: 377

add css style 

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

Upvotes: -2

Related Questions