Question

我试图使用Angular Bootstrap Daterange Picker，但是每个实例都会将ng模型覆盖为文本。

这是非常简单的代码：

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

完全像他们提供{4}}的第4个例子。

通过覆盖，我的意思是来自一个对象：

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

转向文字：

 11/11/2015 - 12/14/2015

HERE是一个显示此问题的10秒视频。（希望这有帮助）

这些是我加载的东西：

THIS 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

Answer 1

我陷入同样的问题。我认为它是由更新输入值的机制引起的，它可能在最新版本的daterangepicker中被更改了（我使用的是v2.1.17，而demo是使用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));
}
//...

它有助于不正确的模型绑定，但仍然存在渲染错误 - 初始开始/结束日期不会呈现（输入为空）。所以一般来说，看起来有人只需要将ng-bs-daterangepicker移动到最新版本的daterangepicker。

Answer 2

尝试使用这个轻量级的纯AngularJS DateRangePicker（没有jQuery）。 https://github.com/tawani/taDateRangePicker

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

2 个答案: