Setting custom theme colors in bootstrap datepicker (BS v3)

Question

I have a situation where a user can select different themes. The problem is with the date-picker. The repository for this plugin is here:

GitHub: uxsolutions bootstrap datepicker

The problem is illustrated in the below image:

I set the foreground and background colors on the body tag using javascript. The values are sent from the server. So when the colors are white on black, most of the datepicker window is blank. Now I did come up with a partial solution using a click event on the date field. That solution basically looks for any DIVs that's using the datepicker css class and sets the colors to the theme colors. This is not an ideal solution.

What I would like to do is override the CSS color properties in the CSS classes themselves, but from my reading on here, that doesn't seem to be possible. I dug through the code and it uses HTML templates to generate the different views. It generates everything at once and then hides/shows different DIV frames based on user input. Based on the fact that it's using a find function to locate where to place things, I can't really modify anything. Short of a rewrite for this plugin to accept color themes, Is there a solution to this problem that I am not seeing?

Answer 1

You can absolutely override classes for that widget. I had a related issue where changing a color on my nav dropdown made the datetimepicker background dark, so I added this to a stylesheet that loads after all of the boostrap styles.

.bootstrap-datetimepicker-widget { background-color: #fff !important; }

In your situation looks like the color: rule is the one you need to change instead of background-color:

Make sure of a couple things:

• use !important so that any javascript that modifies things after the styles are loaded will not overwrite it
• make sure the level of specificity is higher than the current default

(https://www.w3schools.com/css/css_specificity.asp in case you need a refresher on specificity)