Прикрепите событие click для ярлыков буднего дня в Angular UI Bootstrap datepicker

Question

Я использую Angular UI Bootstrap datepicker с расширением gm.datepickerMultiSelect, и я бы хотел, чтобы метки будний дней были интерактивными, чтобы я мог выбирать все дни месяца (например, по средам). Я могу получить/вычислить все дни того же дня недели и добавить их в выбранную область дней, но поскольку я довольно новичок в AngularJS & Bootstrap UI, я не могу найти правильный способ запуска этого события click для ярлыков.

Answer 1

Угловой UT Bootstrap позволяет вам переопределить шаблоны своих директив. Вы можете создать свой собственный шаблон, поместив его в тег <script> с типом text/ng-template.

Так мы копируем содержимое Угловой UI-х template/datepicker/day.html и мы изменим его немного, чтобы вызвать новую функцию selectWeekday на нашем будний день в ng-click:

<script type="text/ng-template" id="template/datepicker/day.html"> 
    <table role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}"> 
    <thead> 
     <tr> 
     <th> 
      <button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button> 
     </th> 
     <th colspan="{{::5 + showWeeks}}"> 
      <button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button> 
     </th> 
     <th> 
      <button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button> 
     </th> 
     </tr> 
     <tr> 
     <th ng-if="showWeeks" class="text-center"></th> 
     <!-- Added ng-click and style --> 
     <th ng-click="selectWeekday(label)" style="cursor:pointer;" ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in rows track by $index"> 
     <td ng-if="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td> 
     <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{::dt.uid}}" ng-class="::dt.customClass"> 
      <button type="button" style="min-width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': 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}">{{::dt.label}}</span></button> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</script> 

Примечания: Этот скрипт Тег должен быть в пределах ваши ng-app иначе он будет проигнорирован и не будет перезаписывать исходный шаблон.

Теперь нам нужно изменить datepicker директивы с AngularJS decorators добавить selectWeekday функции:

angular.module('myApp', [ 
    'ui.bootstrap', 
    'gm.datepickerMultiSelect' 
    ]) 
    .config(function($provide) { 
    $provide.decorator('datepickerDirective', function($delegate) { 
     var directive = $delegate[0]; 
     //get a copy of the directive's original compile function 
     var directiveCompile = directive.compile; 

     //overwrite the original compile function 
     directive.compile = function(tElement, tAttrs) { 
     // call the directive's compile with apply to send the original 'this' and arguments to it 
     var link = directiveCompile.apply(this, arguments); 

     //here's where the magic starts 
     return function(scope, element, attrs, ctrls) { 
      //call the original link 
      link.apply(this, arguments); 

      scope.selectWeekday = function(label) { 
      scope.$emit('datepicker.selectWeekday', label); 
      }; 

     }; 
     }; 

     return $delegate; 
    }); 
    }) 

И от контроллера слушать datepicker.selectWeekday:

.controller('DateController', function($scope) { 

    $scope.$on('datepicker.selectWeekday', function(event, newVal) { 
    $scope.selectedWeekday = newVal; 
    }); 

}); 

Здесь вы можете добавить логику выберите дни, основанные на известном выбранном буднем дне!

Вот рабочий стол: http://plnkr.co/edit/Ef4gd7SUYMcG05PuvqFh?p=preview