Question

我使用angular-bootstrap datepicker弹出一个包含可用和不可用日期的日历。

上个月和下个月的日期风格稍微偏淡了一点＆＃39;比禁用的日子，但残疾的日子与启用的日子完全无法区分......

是否可以控制禁用/启用日期的样式？我正在努力与＆＃b; btn-info.disabled＆＃39;上课，但收效甚微...... :-(我想把 - 例如 - 在残疾人约会的背景下举行一些红色毕业......

我认为angular-ui-bootstrap（版本0.10.0）文件的相关部分＆＃34; ui-bootstrap-tpls.js＆＃34;是：

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" +
    "");
}]);

之前是否有人面对和/或解决了这个问题？

Answer 1

我回答我自己的问题，如果有人关心......： - ）

我最后做了＃34;解决＆＃34;用这个css hack，以我的形式＆＃c; css：

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

这种颜色带有深红色背景，禁用日期......我觉得这可以简化日期选择器的使用，当禁用日期可以很多时，而且不仅仅是过去......

Answer 2

我只是用外部样式表覆盖样式，这样你就不会改变UI bootrap，如果你想让其他开发人员重用这个库，这很重要。

就css而言，禁用的颜色继承自.btn-default样式，其中禁用日期的背景与非禁用日期的背景相同。

我要做的是覆盖＆＃39;文字静音＆＃39;适用于残疾人日期。

angular-bootstrap datepicker，如何更改禁用日期样式？

2 个答案: