각도 UI 부트 스트랩 날짜 선택기 - 나는 셀에 색상을 추가하여, 각도 UI 날짜 셀의 색상을 지정하려면 템플릿

Question

에 사용자 정의 함수를 추가, 그래서 나는 이런 일에 기본 템플릿 오버라이드 (override) :

<!-- things from pasted default template, here I change something --> 
<!-- btn-danger instead btn-info for clicked date, test if I can change anything--> 
<!-- call to function from my own controller--> 
<button type="button" style="width:100%;" class="btn btn-default btn-sm" 
    ng-class="{'btn-danger': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" 
    ng-disabled="dt.disabled" tabindex="-1"> 
    <span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current, 
    'text-success': hasEventsCreatedByUser(dt)}"> 
    {{dt.label}}</span> 
</button> 

그리고 그입니다 btn-infobtn-danger에에서 내 testController

$scope.hasEventsCreatedByUser = function(date){ 
      return true; 
}; 

변경에서 (순간) 함수는 단지 다른 클래스를 붙여 있어요 :)하지만 여기 내 컨트롤러에서 메소드를 호출 할 수 없습니다, 아주 쉬웠다 - 전화 F를 사용하려면 모든 솔루션이있다 앵귤러 UI 템플릿에서 내 컨트롤러에서 unfunction 또는 어떤 식 으로든 기본값을 재정의해야합니까 DatepickerController?

자세한 설명 : 사용자는 지정된 날짜로 일정을 만들 수 있습니다. 나는 단지 버튼을 추가 "miniController"를 사용

: 아이디어는, 예를 들어, 그는 녹색

모의 솔루션을 발견 만든 날짜와 셀을 만드는 것입니다

<button ng-controller="miniController" type="button" style="width:100%;" class="btn btn-default btn-sm" ..... 

그러나 이것이 단지 해결책이 아니라는 것을 알고 있습니다. 누군가가 알아낼 수있는 아이디어가 있다면, 저를 도울 결심을한다면 매우 행복 할 것입니다 - 미리 감사드립니다!

Answer 1

소스 파일을 변경하는 것이 좋지 않습니다. 그러나 당신이 ui 부트 스트랩 소스 파일을 변경하는 것이 괜찮다면, 서로 다른 색상을 적용 할 수 있습니다. 여기 제가 만든 것입니다.

다음은 소스의 변경 사항입니다.

날짜 선택 도구 템플릿 변경 (datepicker.html)

<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=\"{'dt-disabled':dt.disabled,'btn-info': dt.selected,'dt-selected': dt.selected,'dt-available':(dt.verified && dt.available),'dt-verified':dt.verified}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\"><span ng-class=\"{'text-muted': dt.secondary}\">{{dt.label}}</span></button>\n" + 
    "  </td>\n" + 
    " </tr>\n" + 

날짜 선택기 컨트롤러 변경 (DatepickerController)

//Your modification starts 
    this.dateVerified = function(date,mode){ 
     var currentMode = this.modes[mode || 0]; 
     return ($scope.dateVerified && $scope.dateVerified({date: date, mode: currentMode.name})) 
    } 

    this.dateAvailable = function(date,mode){ 
     var currentMode = this.modes[mode || 0]; 
     return ($scope.dateAvailable && $scope.dateAvailable({date: date, mode: currentMode.name})) 
    } 
    //your modification end 

날짜 선택 지침 변경 (날짜 선택기)

.directive('datepicker', ['dateFilter', '$parse', 'datepickerConfig', '$log', function (dateFilter, $parse, datepickerConfig, $log) { 
    return { 
    restrict: 'EA', 
    replace: true, 
    templateUrl: 'template/datepicker/datepicker.html', 
    scope: { 
     dateDisabled: '&', 
     //your modification starts here 
     dateVerified:'&', 
     dateAvailable:'&', 
     //Your modification ends here 
    }, 



    ngModel.$setValidity('date', valid); 

    var currentMode = datepickerCtrl.modes[mode], data = currentMode.getVisibleDates(selected, date); 
    angular.forEach(data.objects, function(obj) { 
     obj.disabled = datepickerCtrl.isDisabled(obj.date, mode); 
    }); 

    //your modification starts here 
    //set dateVerfied 
    if(datepickerCtrl.dateVerified){ 
     angular.forEach(data.objects, function(obj) { 
      obj.verified = datepickerCtrl.dateVerified(obj.date, mode); 
     }); 
    } 
    //set date availabe 
    if(datepickerCtrl.dateAvailable){ 
     angular.forEach(data.objects, function(obj) { 
      obj.available = datepickerCtrl.dateAvailable(obj.date, mode); 
     }); 
    } 
    //Your modification ends here 
    ngModel.$setValidity('date-disabled', (!date || !datepickerCtrl.isDisabled(date))); 

    scope.rows = split(data.objects, currentMode.split); 
    scope.labels = data.labels || []; 
    scope.title = data.title; 

귀하의 코드 템플릿

<datepicker ng-model="model.selectedDate" ng-click="dateClicked();" date-format="yyyy-MM-dd" date-type="string" ng-class="{'opacity-2':model.loadingDate}" style="width: 395px;height: 230px;margin:0 auto;" date-disabled="isDateNonAvailableDate(date, mode)" date-verified="dateVerified(date, mode);" date-available="dateAvailable(date, mode);" show-weeks="true" class="well well-sm" close-text="Close"></datepicker> 

컨트롤러

$scope.dateVerified= function(date, mode) { 
     return true; 

$scope.dateAvailable = function(date, mode) { 
     return true; // to get color 
    }; 

귀하의 CSS를

.dt-available{ 
    color: #fff; 
    background-color: green !important; 
    border-color: green !important; 
} 

.dt-disabled{ 
    color: #fff; 
    background-color: red !important; 
    border-color: red !important; 
} 

.dt-selected{ 
    color: #fff; 
    background-color: blue !important; 
    border-color: blue !important; 
} 

Answer 2

각도 UI 부트 스트랩 DatePicker에서 당신이 정의하는 클래스의 함수를 호출 할 수있는 특성 custom-class을했습니다

맞춤 클래스 (날짜, 모드) (기본값 : null) : 의 선택적 표현식은 전달 날짜 및 현재 모드 (일 | 달 | 연도)를 기반으로 클래스를 추가합니다.