Angular-strap datepicker doesn't update existing model value

Question

I am using angular-strap datepicker from http://mgcrea.github.io/angular-strap/##datepickers for my angularjs SPA project. when editing an existing record using ngModel two way binding, Angular doesn't detect the date field change and even if I force the form to save by updating another non date field, the new date is not updated in backend. Here is the related part in my html file:

<input name="DecisionDatePicker" id="ddpID" type="text" class="form-control input-medium" tabindex="14" placeholder="{{vm.format}}"
   data-date-format="MM-dd-yyyy" 
   data-ng-model="vm.formData.dateDecision"
   data-ng-required="vm.decisionDateRequired"
   bs-datepicker />

I do not do anything special in my js file. I am using breezejs for my data handling and it is working fine for other fields. what am I doing wrong? Any help is appreciated.

I'm struggling with a similar problem (Breeze entity is updated from timepicker, but entityChanged event is not called). Have you ever found a solution to this? — Pascal Berger

Mateus Lopes Mateus Lopes · Accepted Answer · 2015-05-19T16:18:18

I've had this same problem and I solved with a custom directive that updates the model when the bs-datepicker dispatches a blur event:

angular.module('moduleName').directive('updateModelOnBlur', 
      ['$parse', function($parse) {
        return {
          restrict: 'A',
          require: 'ngModel',
          link: function (scope, elm, attrs) {
              elm.bind("blur", function (event) {
                scope.$apply(function () {
                  var model = $parse(attrs.ngModel);
                  model.assign( scope, elm.context.value );
                });
              });
          }
        };
      }]
    );

I know this is just a hack, and not a final solution for the problem. But, if you are stuck and want to keep going, sometimes a hack might be useful.

You can also include $filter service in the directive if you want to manipulate date format before updating model. ;)

Angular-strap datepicker doesn't update existing model value

1 Answers