앵귤러 부트 스트랩 datepicker 기본 사용자 정의 클래스, 현재 날짜 강조 표시

Question

모든 현재 날짜가 강조 표시되도록 모든 datepickers를 업데이트해야합니다. 코드 custom-class="getDayClass(date, mode)"을 찾았지만 실제로 이것을 모든 datepicker 지시어에 복사하여 붙여 넣어야합니까? config에 설정하여 페이지에 이미 존재하는 모든 datepickers에 영향을 줄 수있는 방법이 있습니까?

나는 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" +

그리고 우리에게 addednew 라인을 참조하십시오

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