angularjs – Angular UI Bootstrap Datepicker – 为模板添加自

发布时间：2020-12-17 17:04:15 所属栏目：安全来源：网络整理

导读：我想通过为单元格添加颜色来指定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--!--

我想通过为单元格添加颜色来指定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" .....

但我知道这只是模拟不是解决方案 – 如果有人知道如何弄清楚,如果决定帮助我,我会很高兴 – 提前谢谢你！

解决方法

我知道在源文件中进行更改不是一个好主意.但如果您可以在ui bootstrap源文件中进行更改,则可以实现不同的颜色.这是我做的一个.

以下是来源的变化.

日期选择器模板更改(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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!