引導的DateTimePicker - 對角

Question

考慮下面的演示改變事件：

http://jsfiddle.net/ADukg/8851/

我想每次都爲我的控制值的日期更改爲更新。因此，每次從ng模型更改的值下面的框中選擇新日期時。

但是在使用下面的指令，我得到上面寫錯誤。

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

      element.datetimepicker({ 

       onRender:function (date) { 

        // Triggers a digest to update your model 
        scope.$apply(function() { 
         ngModelCtrl.$setViewValue(date); 
        }); 

       } 

      }); 
     } 
    } 
}); 

如何檢測Datetimepicker的Angular變化？

Answer 1

引導的datetimepicker插件不支持在構造函數中的選項change事件，但您可以使用dp.change事件剛添加的元素的datetimepicker到：

element.datetimepicker({}); 
    element.on('dp.change', function(event) { 
    scope.$apply(function() { 
     ngModelCtrl.$setViewValue(event.date.format()); 
    }); 
    }) 

這裏是更新您的jsfiddle：
http://jsfiddle.net/dekelb/fc9kuy3x/3/

Answer 2

Eonasdan引導datimepicker火災dp.change當日期更改。更新與選定的日期模型的方法是使用下面的代碼：

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('mainCtrl', ['$scope', function($scope) { 
 
    $scope.compared_date = "Compare Date"; 
 
}]); 
 

 

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

 
     element.datetimepicker().on('dp.change', function(e) { 
 
     scope.compared_date = e.date; 
 
     }); 
 
    } 
 
    } 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="mainCtrl"> 
 

 
    <div class='input-group date' id='datetimepickerday'> 
 
    <input datetimepicker class="form-control" ng-model="compared_date"/> 
 
    <span class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
    </div> 
 
    Model is: {{compared_date}} 
 
</div>

注意e.date是一個時刻的對象。此外，eonasdan的日期時間選擇器是爲bootstrap/jQuery環境而誕生的，我認爲我不應該在角度項目中使用，Angular Wrapper在官方文檔中是鏈接的。