Javascript 如何在angularJS中检测引导datetimepicker更改事件

我在angular中使用这个日期时间选择器

在控制器内部，我有：

$('#picker').datetimepicker();

在我的HTML中，我有：

    <div id="#picker" >
        <input type='text' style="font-size:10pt;" class="rptv-input" placeholder="Start Time" ng-model='adate' ng-change="datechange()" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>       

一切都由一个控制器“AppController”管理。 问题是，当我通过单击在日历上选择日期时，它不会触发任何“更改”事件（换句话说，不会触发datechange）。如果我在ng型号“adate”上做一块手表，它似乎也不会触发它。如果在文本框中键入，则范围变量会更改

---

如果用户单击选择器中的日期进行更改，如何检测文本框上的更改？

以下是逻辑的jist，但基本上您需要生成一个指令，从而创建datetimepicker本身。然后在boostrips

change（）

函数中，您必须执行一个触发摘要循环并更新模型的

$apply（）

用途：

<input datetimepicker ng-model="adate" />

---

更改事件在引导程序中触发，因此您可能需要为计时器选择器创建自定义指令，以便捕获

更改事件，如下所示：

  .directive('yourDirective', function(){
                        return{
                          require: '?ngModel',
                          restrict: 'A',
                          link: function (scope,element,attrs, ngModel){
                            if (!ngModel) return;
                            element.bind('change', function(e){
                           //triggered event if change
                            });
                          }
                        };
                      });

我的指令和角度1.5组件

        .directive('externalUpdate', ['$parse', function($parse) {
            return {
                link: function(scope, element, attrs){
                    var setterFunc = $parse(attrs.ngModel).assign;
                    var func = scope.$eval(attrs.externalUpdate);
                    func(element, function(value) {
                        scope.$apply(function() {
                            setterFunc(scope, value);
                        });
                    });
                }
            };
        }])
        .component('datebox', {
            bindings: {
                size: '@@?',
                name: '@@',
                text: '@@',
                model: '=',
                classes: '@@?',
                disabled: '=?',
                time: '<?'
            },
            controller: function() {
                if (!this.size) {
                    this.col1 = '6';
                    this.col2 = '6';
                } else {
                    var size = parseInt(this.size);
                    this.col1 = size.toString();
                    this.col2 = (12 - size).toString();
                }
                this.updateInput = function(element, setter) {
                    element.on("dp.change", function() { setter(element.val()); });
                }
            },
            template: String.raw`
                <div class="form-group">
                    <label ng-if="$ctrl.col1!='0'" for="{{::$ctrl.name}}" class="col-md-{{::$ctrl.col1}} control-label">{{::$ctrl.text}}</label>
                    <div class="col-md-{{::$ctrl.col2}}">
                        <input type="text" id="{{::$ctrl.name}}" ng-disabled="$ctrl.disabled"
                            class="form-control input-sm {{::$ctrl.classes}}" 
                            ng-class="[{datepicker: $ctrl.time!=true},{datetimepicker: $ctrl.time==true}]" 
                            ng-model="$ctrl.model" external-update="$ctrl.updateInput">
                    </div>
                </div>`
        })
        .component('daterangebox', {
            bindings: {
                size: '@@?',
                name: '@@',
                text: '@@',
                model: '=',
                classes: '@@?',
                disabled: '=?',
                time: '<?'
            },
            controller: function() {
                if (!this.model || typeof this.model !== 'object') {
                    this.model = {};
                }
                if (!this.size) {
                    this.col1 = '6';
                    this.col2 = '6';
                } else {
                    var size = parseInt(this.size);
                    this.col1 = size.toString();
                    this.col2 = (12 - size).toString();
                }
                this.updateInput = function(element, setter) {
                    element.on("dp.change", function() { setter(element.val()); });
                }
            },
            template: String.raw`
                <div class="form-group">
                    <label ng-if="$ctrl.col1!='0'" for="{{::$ctrl.name}}" class="col-md-{{::$ctrl.col1}} control-label">{{::$ctrl.text}}</label>
                    <div class="col-md-{{::$ctrl.col2}}">
                        <div class="input-group">
                            <input type="text" id="{{::$ctrl.name}}" ng-disabled="$ctrl.disabled"
                                class="form-control input-sm {{::$ctrl.classes}}"
                                ng-class="[{datepicker: $ctrl.time!=true},{datetimepicker: $ctrl.time==true}]"
                                ng-model="$ctrl.model.start" external-update="$ctrl.updateInput">
                            <span class="input-group-addon input-sm">-</span>
                            <input type="text" ng-disabled="$ctrl.disabled"
                                class="form-control input-sm {{::$ctrl.classes}}" 
                                ng-class="[{datepicker: $ctrl.time!=true},{datetimepicker: $ctrl.time==true}]" 
                                ng-model="$ctrl.model.end" external-update="$ctrl.updateInput">
                        </div>
                    </div>
                </div>`
        })

.directive（'externalUpdate'，['$parse'，function（$parse）{
返回{
链接：函数（范围、元素、属性）{
var setterFunc=$parse（attrs.ngModel）.assign；
var func=范围$eval（属性外部更新）；
func（元素、函数（值）{
作用域$apply（函数（）{
setterFunc（范围、值）；
});
});
}
};
}])
.component（'日期框'{
绑定：{
大小：'@？'，
名称：“@@”，
正文：“@@”，
型号：'='，
类别：“@@”，
已禁用：“=？”，
时间：“另一个选项是

HTML:

对于您的应用程序的全局解决方案，我绝对支持上述答案中所示的自定义指令。但对于一次性：

根据当前消息，附加的事件处理程序需要查找事件。请参见示例：

Html标记：

<input class="date-picker" type="text" ng-model="$ctrl.model.date" />

(function () {

    'use strict'

    var MyTestController = function () {

        var vm = this;

        vm.model = {
            date: undefined
        };

        (function initilize() {
            $('.date-picker').datepicker({
                autoclose: true,
                forceParse: false
            }).on('changeDate', function (e) {
                console.log('date was changed to: ' + e.date);
            });
        })();
    };

    angular.module('myApp').component('myTest', {
        controller: [MyTestController],
        templateUrl: 'app/modules/my-test/view.html'
    });
})();

我最近也遇到了同样的问题（使用检测angularJS中的datetimepicker更改事件），实际上对我有效的是@Mark Pieszak的相同想法，但有一些小的更改（我想是因为插件版本）。如果您使用的是版本4的插件，则需要使用on侦听器和dp.change事件来获取更改事件

   app.directive('datetimepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {

            element.datetimepicker({
                defaultDate: new Date(),
                maxDate: moment().endOf('d'),
                locale: 'es',
                format: 'DD/MM/YYYY',
                widgetPositioning: { horizontal: 'right', vertical: 'bottom' }

            }).on('dp.change', function (date) {
                scope.$apply(function () {
                    ngModelCtrl.$setViewValue(date.date !== false ? date : null);
                });
            });
        }
    }
});

用法是一样的

<input datetimepicker name="yourInputName" id="yourInputName" type='text' class="form-control" ng-model="yourModelProperty" ng-required="yourRequiredExpression" ng-disabled="yourDisabledExpression" />



我用作ngModelCtrl.$setViewValue（）的表达式参数是因为当我只传递日期参数时，输入变得有效，即使我将其留空。
它是另一个库，工作方式不同。不重复。更新了一个答案以反映boostrap 3的事件，而不是jQuery UII。我遇到了一个问题，即当我从中选择日期时，viewmodel上的ng模型属性没有更新日历（不在文本框中主动写入任何内容），并且它仍然保持角度指令ng pristine，因为它从不使用新的选定值刷新。有什么需要考虑的吗？
(function () {

    'use strict'

    var MyTestController = function () {

        var vm = this;

        vm.model = {
            date: undefined
        };

        (function initilize() {
            $('.date-picker').datepicker({
                autoclose: true,
                forceParse: false
            }).on('changeDate', function (e) {
                console.log('date was changed to: ' + e.date);
            });
        })();
    };

    angular.module('myApp').component('myTest', {
        controller: [MyTestController],
        templateUrl: 'app/modules/my-test/view.html'
    });
})();

   app.directive('datetimepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {

            element.datetimepicker({
                defaultDate: new Date(),
                maxDate: moment().endOf('d'),
                locale: 'es',
                format: 'DD/MM/YYYY',
                widgetPositioning: { horizontal: 'right', vertical: 'bottom' }

            }).on('dp.change', function (date) {
                scope.$apply(function () {
                    ngModelCtrl.$setViewValue(date.date !== false ? date : null);
                });
            });
        }
    }
});

<input datetimepicker name="yourInputName" id="yourInputName" type='text' class="form-control" ng-model="yourModelProperty" ng-required="yourRequiredExpression" ng-disabled="yourDisabledExpression" />