AngularJS - date range picker - ng model being overridden

Question

Im trying to use the Angular Bootstrap Daterange Picker , But every instance overrides the ng model to be textual.

This is the very simple code:

<input class="input-filter form-control" type="daterange" ng-model="test" ranges="ranges" />
{{test}}

Exactly like the 4th example that they provide HERE.

By overriding, I mean that from an object:

{"startDate":"2015-11-28T22:00:00.000Z","endDate":"2015-11-28T22:00:00.000Z"} 

It turns to text:

 11/11/2015 - 12/14/2015 

THIS is a 10 seconds video showing this problem. (hope this helps)

And these are the things I load:

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.11/daterangepicker.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/daterangepicker.min.css https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.13/moment.min.js http://luisfarzati.github.io/ng-bs-daterangepicker/ng-bs-daterangepicker.js

Answer 1

I fall into the same issue. I think it caused by the mechanism of updating input value, it probably has been changed in the latest version of daterangepicker (i used v2.1.17 while demo is working with 1.3.17). New daterangepicker has an option autoUpdateInput, it might be helpful to set it to false in directive configuration code (https://github.com/luisfarzati/ng-bs-daterangepicker/blob/master/src/ng-bs-daterangepicker.js):

//...
options.locale = $attributes.locale && $parse($attributes.locale)($scope);
options.opens = $attributes.opens || $parse($attributes.opens)($scope);

options.autoUpdateInput = false; // Changed row

if ($attributes.enabletimepicker) {
    options.timePicker = true;
    angular.extend(options, $parse($attributes.enabletimepicker)($scope));
}
//...

It helps with incorrect model binding, but there is still a bug with rendering -- initial start/end dates do not rendered (input is blank). So in general it looks like someone just needs to move ng-bs-daterangepicker to the latest version of daterangepicker.