angular-bootstrap datepicker, how to change disabled dates style?

I'm using angular-bootstrap datepicker to popup a calendar with available and not available dates.

Here is the plunker...

The style of previous and next month dates is a bit more 'faint' than disabled days, but disabled days are quite indistinguishable from enabled ones...

Is it possible to control the style of disabled / enabled dates? I'm struggling with 'btn-info.disabled' class, with little success... :-( I would like to put - for example - some graduation of red in the background of disabled dates...

I think the relevant part of angular-ui-bootstrap (Version 0.10.0) file "ui-bootstrap-tpls.js" is:

angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function($templateCache) {
    "<table>\n" +
    "  <thead>\n" +
    "    <tr>\n" +
    "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\"><i class=\"glyphicon glyphicon-chevron-left\"></i></button></th>\n" +
    "      <th colspan=\"{{rows[0].length - 2 + showWeekNumbers}}\"><button type=\"button\" class=\"btn btn-default btn-sm btn-block\" ng-click=\"toggleMode()\"><strong>{{title}}</strong></button></th>\n" +
    "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\"><i class=\"glyphicon glyphicon-chevron-right\"></i></button></th>\n" +
    "    </tr>\n" +
    "    <tr ng-show=\"labels.length > 0\" class=\"h6\">\n" +
    "      <th ng-show=\"showWeekNumbers\" class=\"text-center\">#</th>\n" +
    "      <th ng-repeat=\"label in labels\" class=\"text-center\">{{label}}</th>\n" +
    "    </tr>\n" +
    "  </thead>\n" +
    "  <tbody>\n" +
    "    <tr ng-repeat=\"row in rows\">\n" +
    "      <td ng-show=\"showWeekNumbers\" class=\"text-center\"><em>{{ getWeekNumber(row) }}</em></td>\n" +
    "      <td ng-repeat=\"dt in row\" class=\"text-center\">\n" +
    "        <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected}\" ng-click=\"select(\" ng-disabled=\"dt.disabled\" datepicker-disabled=\"dt.disabled\"><span ng-class=\"{'text-muted': dt.secondary}\">{{dt.label}}</span></button>\n" +
    "      </td>\n" +
    "    </tr>\n" +
    "  </tbody>\n" +
    "</table>\n" +

Did anybody face and/or solve this issue before?


I answer my own question, if anybody cares... :-)

I did finally "solve" with this css hack, in my form's css:

.btn[disabled] {
  opacity: 0.90;
  filter: alpha(opacity=90);
  background-color: #690000;
  color: #777;

This colors with a dark red background the disabled dates... I feel this simplify the datepicker usage, when disabled dates can be a lot, and not only in the past...

I would just override the style with an external style sheet, that way you will not be changing the UI bootsrap, important if you want other devs to reuse the library.

In terms of css the disabled colour inherits from the .btn-default style where as the background of the disabled date is the same as the non disabled ones.

What I would do is override the style for 'text-muted' which is applied to the disabled dates.

Need Your Help

Applying AOP

c# castle-windsor aop castle-dynamicproxy

I've been using some basic AOP style solutions for cross-cutting concerns like security, logging, validation, etc. My solution has envolved around Castle Windsor and DynamicProxy. I've gone down ...

Controls added dynamically not visible


I am trying to add controls to WPF Grid dynamically basically to create a suduku layout, I have checked with Visual tree viewer in debug mode, controls are getting added to the Grid, but never upda...