1

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

这是笨蛋...

上个月和下个月日期的样式比禁用日更“微弱”，但禁用日与启用日完全没有区别......

是否可以控制禁用/启用日期的样式？我在'btn-info.disabled'课程上苦苦挣扎，但收效甚微...... :-(我想在禁用日期的背景下放一些红色毕业......

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

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

以前有人遇到和/或解决过这个问题吗？

4

2 回答 2

3

我回答我自己的问题，如果有人在乎... :-)

我终于在表单的 css 中“解决”了这个 css hack：

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

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

于 2014-03-14T11:08:21.180 回答
1

我只是用外部样式表覆盖样式，这样您就不会更改 UI 引导程序，如果您希望其他开发人员重用该库，这一点很重要。

在 css 方面，禁用颜色继承自.btn-default禁用日期的背景与非禁用日期相同的样式。

我要做的是覆盖应用于禁用日期的“文本静音”样式。

于 2014-03-12T09:58:06.213 回答