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

Question

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) {
  $templateCache.put("template/datepicker/datepicker.html",
    "<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(dt.date)\" 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?

MarcoS MarcoS · Accepted Answer · 2014-03-14T11:08:21

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

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

2 Answers