Angular UI Bootstrap Datepicker - 向模板添加自定义函数

Question

我想通过为单元格添加颜色来指定 Angular UI 日期单元格的颜色，因此我使用以下内容覆盖默认模板：

<!-- 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>

这是我testController中的（目前）功能

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

从btn-info 更改为btn-danger 非常简单，它只是粘贴另一个类:) 但是我不能在这里从我的控制器调用方法 - 是否有任何解决方案可以在 Angular UI 模板中从我的控制器启用调用功能，或者我必须以某种方式覆盖默认的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

日期选择器指令更改（datepicker）

.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

Angular UI Bootstrap Datepicker 具有属性custom-class，您可以在其中调用您的函数来定义类：

custom-class (date, mode) (默认: null) : 一个可选的表达式 根据过去的日期和当前模式（日|月|年）添加类。