I am currently implementing the Bootstrap 3 DateTimePicker plugin by eonasdan. While everything seems to be functioning correctly, I have encountered an issue with binding the selected date within the input field to Angular's ng-model. Whenever I make a date selection using the picker, the 'dp.change' event triggers and updates the date in the input field; however, I need to manually press a key (such as spacebar) for the ng-model to detect the update.
Below is a snippet of the code:
JavaScript with Angular directive:
(function () {
'use strict';
var module = angular.module('feedApp');
module.directive('datetimepicker', [
'$timeout',
function ($timeout) {
return {
require: '?ngModel',
restrict: 'EA',
scope: {
options: '@',
onChange: '&',
onClick: '&'
},
link: function ($scope, $element, $attrs, controller) {
$($element).on('dp.change', function () {
//alert("change");
$timeout(function () {
var dtp = $element.data('DateTimePicker');
controller.$setViewValue(dtp.date());
$scope.onChange();
});
});
$($element).on('click', function () {
$scope.onClick();
});
controller.$render = function () {
if (!!controller) {
if (controller.$viewValue === undefined) {
controller.$viewValue = null;
}
else if (!(controller.$viewValue instanceof moment)) {
controller.$viewValue = moment(controller.$viewValue);
}
$($element).data('DateTimePicker').date(controller.$viewValue);
}
};
$($element).datetimepicker($scope.$eval($attrs.options));
}
};
}
]);
})();
HTML:
<div style="max-width: 250px">
<div class="input-group input-group-sm date">
<input type="text" class="form-control" options="{format:'DD.MM.YYYY HH:mm', locale:'pl'}" datetimepicker ng-model="feed.reminderDateTime" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Is there a solution to this issue? Any help or suggestions would be greatly appreciated.