我使用Angular UI Bootstrap datepicker和gm.datepickerMultiSelect扩展名,我想让平日标签可点击,以便我可以选择当月的所有日期(如所有星期三)。我可以计算/计算同一个工作日的所有日子,并将它们添加到选定的日期范围,但由于我对AngularJS & Bootstrap UI颇为陌生,我无法找到触发标签点击事件的正确方法。附加Angular UI中工作日标签的点击事件Bootstrap datepicker
1
A
回答
1
Angular UI Bootstrap允许您覆盖他们的指令模板。您可以创建自己的模板,方法是将其放置在类型为text/ng-template
的<script>
标记中。
所以我们复制的角度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
内否则它将被忽略,并且不会覆盖原始模板。
现在我们需要用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;
});
});
从这里,你可以将逻辑添加到根据已知选定的工作日选择日期!
这里是一个工作plunkr:http://plnkr.co/edit/Ef4gd7SUYMcG05PuvqFh?p=preview
相关问题
- 1. 在日期选择上添加点击事件angular-ui bootstrap
- 2. Angular-UI Bootstrap Datepicker新日期
- 3. Angular UI Bootstrap datepicker
- 4. Angular-UI Bootstrap Datepicker问题
- 5. jquery ui datepicker不工作附加div
- 6. angular-ui-bootstrap:处理弹出窗口上的点击事件
- 7. 将双击事件附加到标签
- 8. 点击日历时的bootstrap datepicker focusout
- 9. Angular UI Bootstrap datepicker在uigrid中隐藏
- 10. 附加IFRAME中的点击事件
- 11. Bootstrap datepicker事件
- 12. jQuery UI Datepicker:如何在特定日期添加可点击事件?
- 13. amCharts中的标签点击事件
- 14. UI Bootstrap Datepicker弹出日期格式
- 15. Angular UI Bootstrap monthpicker
- 16. Angular/Bootstrap Datepicker
- 17. AS3:鼠标点击事件不工作
- 18. 在UI日历中添加事件点击AngularJS 1.x
- 19. Angular UI Datepicker json设置日期不工作
- 20. LWUIT标签的点击事件
- 21. bootstrap datepicker,beforeShowDay第二次点击后工作
- 22. 'hide.bs.modal'模式事件在点击bootstrap-datepicker时被触发
- 23. GWT DatePicker识别日历图标点击
- 24. jQuery循环和附加点击事件
- 25. Angular Bootstrap datepicker太窄
- 26. ngx-bootstrap datepicker angular 4
- 27. Angular JS bootstrap UI日历问题
- 28. ui-bootstrap datepicker启用周末日
- 29. Angular-ui-bootstrap - 无法禁用ng中的标签 - 重复
- 30. RichMarker:附加点击事件侦听器的标志器阵列