角引导日期选择器默认自定义类，突出显示当前日期

Question

我需要更新我所有的日期选择器，以便它们显示当前突出显示的日子。我发现代码custom-class="getDayClass(date, mode)"，但我真的需要复制粘贴到每个datepicker指令吗？有没有办法在config中设置它，以便它影响页面上已存在的所有日期选择器？我试过uibDatepickerPopupConfig.customClass = function(data){return "class"}但它不工作。

谢谢

Answer 1

我在没有修改源代码的情况下找到了解决方案。 首先，我们需要将新模板添加到$ templateCache，然后我们需要使用新函数来扩展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; 
    }); 
});