angular bootstrap datepicker 默认自定义 class, 高亮显示当前日期

Question

我需要更新我所有的日期选择器，以便它们突出显示当前日期。我找到了代码 custom-class="getDayClass(date, mode)" ，但我真的需要将其复制粘贴到每个日期选择器指令中吗？有没有办法在配置中设置它，以便它影响页面上已经存在的所有日期选择器？

我尝试了 uibDatepickerPopupConfig.customClass = function(data){return "class"} 但它不起作用。

谢谢

Answer 1

我在不修改源代码的情况下找到了解决方案。 首先，我们需要向 $templateCache 添加新模板，然后我们需要使用返回自定义 class.

的新函数来扩展 datepicker 指令范围

    $templateCache.put("uib/template/datepicker/day.html",
           "<table role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
           "  <thead>\n" +
           "    <tr>\n" +
           "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left uib-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i aria-hidden=\"true\" class=\"glyphicon glyphicon-chevron-left\"></i><span class=\"sr-only\">previous</span></button></th>\n" +
           "      <th colspan=\"{{::5 + showWeeks}}\"><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm uib-title\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\"><strong>{{title}}</strong></button></th>\n" +
           "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right uib-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i aria-hidden=\"true\" class=\"glyphicon glyphicon-chevron-right\"></i><span class=\"sr-only\">next</span></button></th>\n" +
           "    </tr>\n" +
           "    <tr>\n" +
           "      <th ng-if=\"showWeeks\" class=\"text-center\"></th>\n" +
           "      <th ng-repeat=\"label in ::labels track by $index\" class=\"text-center\"><small aria-label=\"{{::label.full}}\">{{::label.abbr}}</small></th>\n" +
           "    </tr>\n" +
           "  </thead>\n" +
           "  <tbody>\n" +
           "    <tr class=\"uib-weeks\" ng-repeat=\"row in rows track by $index\" role=\"row\">\n" +
           "      <td ng-if=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n" +
           "      <td ng-repeat=\"dt in row\" class=\"uib-day text-center\" role=\"gridcell\"\n" +
           "        id=\"{{::dt.uid}}\"\n" +
           "        ng-class=\"::dt.customClass\">\n" +
           "        <button type=\"button\" class=\"btn btn-default btn-sm\"\n" +
           "          ng-class=\"highlightCurrentDate(dt)\"\n" +
           "          uib-is-class=\"\n" +
           "            'btn-info' for selectedDt,\n" +
           "            'active' for activeDt\n" +
           "            on dt\"\n" +
           "          ng-click=\"select(dt.date)\"\n" +
           "          ng-disabled=\"::dt.disabled\"\n" +
           "          tabindex=\"-1\"><span ng-class=\"::{'text-muted': dt.secondary, 'text-info': dt.current}\">{{::dt.label}}</span></button>\n" +
           "      </td>\n" +
           "    </tr>\n" +
           "  </tbody>\n" +
           "</table>\n" +
           "");

你看我们添加了新行ng-class=\"highlightCurrentDate(dt)\"\n" +

然后我们像我写的那样扩展日期选择器范围：

angular.module('ui.bootstrap.datepicker')
.config(function ($provide) {
    $provide.decorator('uibDatepickerDirective', function ($delegate, $timeout) {
        var directive = $delegate[0];
        var link = directive.link;

        directive.compile = function () {
            return function (scope, element, attrs, ctrls) {
                link.apply(this, arguments);


                scope.highlightCurrentDate = function (dt) {
                    if (dt.selected) {
                        return "";
                    }
                    var date = dt.date;
                    var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
                    var currentDay = new Date().setHours(0, 0, 0, 0);

                    if (dayToCheck === currentDay) {
                        return 'highlight-current-date';
                    }
                }

        };
        return $delegate;
    });
});