Skip to main content
added 298 characters in body
Source Link
Caio Cunha
  • 23.4k
  • 6
  • 81
  • 74

So, the problems are:

  1. change ng_modelper ng-model in the div id=date element;
  2. remove ng_model from the input element and implement ngModelCtrl.$render function in order to render model changes to the element
  3. 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:

  1. as said before, remove the internal ng-model and implement ngModelCtrl.$render to handle model changes
  2. use the template property 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);
  }
}

So, the problems are:

  1. change ng_modelper ng-model in the div id=date element;
  2. remove ng_model from the input element and implement ngModelCtrl.$render function in order to render model changes to the element
  3. 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:

  1. as said before, remove the internal ng-model and implement ngModelCtrl.$render to handle model changes
  2. use the template property in order to encapsulate the internal elements of the component

So, the problems are:

  1. change ng_modelper ng-model in the div id=date element;
  2. remove ng_model from the input element and implement ngModelCtrl.$render function in order to render model changes to the element
  3. 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:

  1. as said before, remove the internal ng-model and implement ngModelCtrl.$render to handle model changes
  2. use the template property 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);
  }
}
Source Link
Caio Cunha
  • 23.4k
  • 6
  • 81
  • 74

So, the problems are:

  1. change ng_modelper ng-model in the div id=date element;
  2. remove ng_model from the input element and implement ngModelCtrl.$render function in order to render model changes to the element
  3. 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:

  1. as said before, remove the internal ng-model and implement ngModelCtrl.$render to handle model changes
  2. use the template property in order to encapsulate the internal elements of the component