Question: Bootstrap DateTimePicker - on change event for Angular

Question

Bootstrap DateTimePicker - on change event for Angular

Answers 2
Added at 2016-12-31 00:12
Tags
Question

Given the demo below:

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

I want every time the date changes for my controller value to update. So every time a new date is selected from the box below the value for ng-model changes.

enter image description here

However upon using the following directive I get the error written above.

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

                }

            });
        }
    } 
});

How can I detect changes in Angular for the Datetimepicker?

Answers
nr: #1 dodano: 2016-12-31 00:12

Bootstrap's datetimepicker plugin doesn't support the change event in the options of the constructor, but you can use the dp.change event of the element you just added the datetimepicker to:

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

Here is the update to your jsfiddle:
http://jsfiddle.net/dekelb/fc9kuy3x/3/

nr: #2 dodano: 2016-12-31 01:12

Eonasdan bootstrap datimepicker fires dp.change when the date is changed. One way to update your model with the selected date is using the following code:

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>

Note that e.date is a moment object. Moreover eonasdan's datetime picker was born for bootstrap/jQuery enviroment, I think that I should not be used in angular projects, an Angular Wrapper is linked in the official docs.

Source Show
◀ Wstecz