角引導日期選擇器默認自定義類，突出顯示當前日期

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; 
    }); 
});