附加点击事件在角UI引导日期选择器平日标签 [英] Attach click event for the weekday labels in Angular UI Bootstrap datepicker

问题描述

我使用角UI引导用的 gm.datepickerMultiSelect 扩展程序，我想使平日标签点击，这样我就可以选择该月所有天数（像所有星期三）。我可以得到/计算相同的工作日中的每一天，并将它们添加到选定的日子范围，但是因为我相当新的AngularJS＆安培;引导用户界面，我无法找到触发了的标签，单击事件的正确方法。

I'm using Angular UI Bootstrap datepicker with the gm.datepickerMultiSelect extension and I'd like to make weekdays labels clickable, so that I could select all days in the month (like all Wednesdays). I can get/calculate all days of the same weekday and add them to the selected days scope, but as I'm rather new to AngularJS & Bootstrap UI, I can't find the right way to trigger that click event for the labels.

推荐答案

角界面引导，您可以覆盖其指令的模板。您可以通过将它＆LT内创建自己的模板;脚本＆GT; 型标记文/ NG-模板。

Angular UI Bootstrap lets you override their directive's templates. You can create your own template by putting it inside a <script> tag with type text/ng-template.

因此​​，我们复制角UI的 模板/日期选择器/ day.html ，我们改变它一点点地调用一个新的函数 selectWeekday 我们的平日的 NG-点击：

So we copy the contents of Angular UI's template/datepicker/day.html and we alter it a little bit to call a new function selectWeekday on our weekday's 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-应用中否则将被忽略，不会覆盖原有的模板。

Note: This script tag must be within your ng-app or else it will be ignored and won't overwrite the original template.

现在，我们需要修改与的日期选择器指令相对=nofollow的> AngularJS装饰添加 selectWeekday 功能：

Now we need to modify the datepicker directive with AngularJS decorators to add the selectWeekday function:

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;
  });

});

从这里您可以添加逻辑来选择基于已知选择的工作日天！

From here you can add the logic to select the days based on the known selected weekday!

下面是一个工作plunkr： http://plnkr.co/edit/Ef4gd7SUYMcG05Pu​​vqFh？ p = preVIEW

Here's a working plunkr: http://plnkr.co/edit/Ef4gd7SUYMcG05PuvqFh?p=preview

这篇关于附加点击事件在角UI引导日期选择器平日标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！