So, the problems are:
- change
ng_modelperng-modelin thediv id=dateelement; - remove
ng_modelfrom theinputelement and implementngModelCtrl.$renderfunction in order to render model changes to the element - as per the component docs:
The only event exposed is ‘changeDate’, which will expose ‘date’ and ‘localDate’ properties on the event object
So you need to handle the change event other ways, look:
element.datetimepicker({
dateFormat:'dd/MM/yyyy hh:mm:ss',
language: 'pt-BR'
}).on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
Here is a working Plnkr.
Some additional tips:
- as said before, remove the internal
ng-modeland implementngModelCtrl.$renderto handle model changes - use the
templateproperty in order to encapsulate the internal elements of the component
A pretty simple example of using $render:
var picker = element.data('datetimepicker');
ngModelCtrl.$render = function() {
if (ngModelCtrl.$modelValue) {
picker.setLocalDate(ngModelCtrl.$modelValue);
} else {
picker.setLocalDate(null);
}
}