在 Angular UI Bootstrap 日期选择器中附加工作日标签的点击事件

Question

我正在使用 Angular UI Bootstrap datepicker with the gm.datepickerMultiSelect 扩展程序，我想让工作日标签可点击，这样我就可以 select 一个月中的所有日子（比如所有星期三）。我可以 get/calculate 同一工作日的所有天，并将它们添加到 selected 天范围，但因为我对 AngularJS & Bootstrap UI, 我找不到触发标签点击事件的正确方法。

Answer 1

Angular UI Bootstrap 让你覆盖他们指令的模板。您可以通过将模板放入类型为 text/ng-template.

的 <script> 标签中来创建自己的模板

所以我们复制 Angular UI 的 template/datepicker/day.html 的内容，我们稍微改变它以在工作日的 [=] 调用新函数 selectWeekday 17=]：

<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 内，否则它将被忽略并且不会覆盖原始模板。

现在我们需要用 AngularJS decorators 修改 datepicker 指令以添加 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;
  });

});

从这里您可以根据已知的 select 工作日将逻辑添加到 select 天！

这是一个有效的插件：http://plnkr.co/edit/Ef4gd7SUYMcG05PuvqFh?p=preview

在 Angular UI Bootstrap 日期选择器中附加工作日标签的点击事件

Attach click event for the weekday labels in Angular UI Bootstrap datepicker

javascript

datepicker

angularjs

angular-ui

angular-ui-bootstrap