Angular Bootstrap Datepicker更改月份事件

问题描述

当用户使用UI Bootstrap 1.3可以在datepicker日历上更改月份时，我需要拨打我的后端电话?

I need to make a call to my backend, when user change month on datepicker calendar is that possible with UI Bootstrap 1.3 ?

推荐答案

您可以使用装饰器扩展datepicker指令，并在装饰器中覆盖compile函数以在activeDate上添加$watch.您可以检查日期的月份或年份是否已更改，如果已更改，请在注入到装饰器中的服务上调用函数.如有必要，请传递日期，并在服务中执行对后端的呼叫.

You can extend the datepicker directive using a decorator, and in the decorator overwrite the compile function to add a $watch on activeDate. You can check if the month or year of the date has changed, and if so call a function on a service that you inject into the decorator. Pass in the date if necessary and in the service perform your call to the backend.

下面和小提琴中的示例-MyService只是记录日期，但是您可以替换调用后端.

Example below and in fiddle - MyService is just logging the date but you can replace with call to backend.

var app = angular.module('app', ['ui.bootstrap']);

angular.module('app').service('MyService', function() {
    this.doStuff = function(date) {
        console.log(date);
    }
});

angular.module('app').config(function($provide) {
    $provide.decorator('datepickerDirective', ['$delegate', 'MyService', function($delegate, MyService) {
        var directive = $delegate[0];

        var link = directive.link;

        directive.compile = function() {
            return function(scope, element, attrs, ctrls) {
                link.apply(this, arguments);

                scope.$watch(function() {
                    return ctrls[0].activeDate;
                }, function(newValue, oldValue) {
                    if (oldValue.getMonth() !== newValue.getMonth()
                       || oldValue.getYear() !== newValue.getYear()) {
                        MyService.doStuff(newValue);
                    }
                }, true);
            }
        };
        return $delegate;
    }]);
});

这篇关于Angular Bootstrap Datepicker更改月份事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！