javascript - AngularJS - 日期范围选择器 - ng 模型被覆盖

Question

我正在尝试使用 Angular Bootstrap Daterange Picker , 但每个实例都会将 ng 模型覆盖为文本。

这是非常简单的代码:

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

与他们提供的第 4 个示例完全一样 HERE .

通过覆盖，我的意思是从一个对象:

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

转为文字:

 11/11/2015 - 12/14/2015 

THIS是一个显示此问题的 10 秒视频。 (希望这有帮助)

这些是我加载的东西:

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

我遇到了同样的问题。我认为这是由更新输入值的机制引起的，它可能已在最新版本的 daterangepicker 中更改(我使用 v2.1.17，而演示使用 1.3.17)。新的 daterangepicker 有一个选项 autoUpdateInput，在指令配置代码 (https://github.com/luisfarzati/ng-bs-daterangepicker/blob/master/src/ng-bs-daterangepicker.js) 中将其设置为 false 可能会有所帮助:

//...
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));
}
//...

它有助于解决不正确的模型绑定(bind)问题，但仍然存在渲染错误——初始开始/结束日期未呈现(输入为空白)。所以总的来说，看起来有人只需要将 ng-bs-daterangepicker 移动到最新版本的 daterangepicker。