How to detect datetimepicker bootstrap event change events in angularJS

Question

I use this datetime collector in angular.

https://eonasdan.imtqy.com/bootstrap-datetimepicker/

Inside the controller, I have:

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

In my HTML, I:

  <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> 

Everything is controlled by the AppController. The problem is that when I click a date on the calendar, it does not cause any “change” event (in other words, datechange does not fire). If I make a watch on the ng-model "adate", it also does not seem to call it. If I enter a text box, the scope variable changes.

How can I detect changes in a text box if a user clicks on a date in a selector to change it?

Answer 1

This is the essence of the logic, but basically you need to make a directive, which in turn creates the datetimepicker itself. Then, in the boostraps change() function, you must make $apply() , which starts the digest cycle and updates your model.

datetimepicker document documentation containing the document

 angular.module('yourApp') .directive('datetimepicker', function () { return { restrict: 'A', require : 'ngModel', link : function (scope, element, attrs, ngModelCtrl) { element.datetimepicker({ change:function (date) { // Triggers a digest to update your model scope.$apply(function () { ngModelCtrl.$setViewValue(date); }); } }); } } }); 

Using:

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

Answer 2

Another variant:

HTML:

  <div class="input-group date" id="dateTimePicker"> <input type="text" class="form-control" /> <span class="input-group-addon" ng-click="setDateTime()"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> 

Controller:

  $scope.setDateTime = function () { $("#dateTimePicker").datetimepicker().on("dp.change", function (data) { $scope.date = data.date._d; }); } 

Answer 3

The change event is triggered in bootstrap, so you may need to create a custom directive for your time-piker to catch the change event as follows:

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

Answer 4

For a global solution for your application, I definitely support custom directives as shown in the answers above. But for disposable:

According to the current Download Documentation, the attached event handler should look for changeDate . Example:

HTML markup:

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

Angular 1.5.9 Controller:

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

Answer 5

My directive and angular 1.5 component

  .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>` }) 

Answer 6

I recently had the same issue (detecting datetimepicker change event in angularJS using https://eonasdan.imtqy.com/bootstrap-datetimepicker/ ) and what actually worked for me was the same @Mark Pieszak idea, but with some minor changes (I think due to the plugin version). If you are using plugin version 4, you need to use the on listener and the dp.change event to get the change event

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

and use of the same.

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

Expression i used as parameter ngModelCtrl. $ setViewValue (), was because when I just passed the date parameter, the input became valid even when I left it empty.

Answer 7

Another simple method. It worked for me

HTML

 <input id="datepicker" type="text" class="form-control" data-ng-model="CurDate"/> 

jquery code:

 $("#datepicker").on("dp.change", function () { $(this).trigger('change'); }); 

Thought of saving fixes / workarounds separately ...

There is also Angular Wrapper (I have not tried it). https://gist.github.com/eugenekgn/f00c4d764430642dca4b