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ハックで最終的に「解決」しました：

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

これは、無効な日付を濃い赤の背景で色付けします...過去だけでなく、無効な日付が多くなる可能性がある場合、これにより、日付ピッカーの使用が簡素化されると思います...

于 2014-03-14T11:08:21.180 に答える