Datepicker 未绑定到 Angular 模型

Question

我制作了一个日期选择器指令，它使用改进的日期选择器库中的单个日期选择器。它有两个输入标签和一个确定按钮。

Date Picker Library

Single Date Picker Example

如果我通过键盘更改输入字段的值，模型将获得所需的值并按预期调用服务器。当我使用日期选择器时出现问题。模型的值不会改变。它仍然具有我通过键盘设置的相同值。

但是如果我运行 document.getElementById('frompicker').value 使用控制台，它会显示我使用日期选择器设置的正确日期。

如果我不通过键盘设置任何值而只使用日期选择器下拉菜单，则模型的值是未定义的。

我尝试了为 Angular Boostrap UI Datepicker 和 Angular UI Datepicker 提供的一些解决方案。 None 他们工作。

评论后编辑

代码可以在这里找到 - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx

非常感谢任何帮助:)

Answer 1

您应该在日期选择器更改后通过

同步范围

$scope.$apply();

或

$scope.$evalAsync();

似乎是 'apply.daterangepicker' 日期选择器事件

Answer 2

我尝试了不同答案中提到的所有方法。我的同事告诉我，不必要地使用 $scope.$evalAsync() 或 $scope.$apply() 是个坏主意。我们的代码库不使用 digest、compile 等。所以这造成了障碍。

我最终决定按照 Valery Kozlov（接受的答案）的建议检测日期更改事件并手动更改模型。

我是这样访问日期的。

$('#frompicker').val(); // can be done without jQuery as well

使用此更改模型。

// use Angular's $on to make things consistent if needed

$('#frompicker').on('apply.daterangepicker', function(ev, picker) {
    scope.vm.from_date = $('#frompicker').val();                
});

Datepicker 未绑定到 Angular 模型

Datepicker does not bind to Angular Model

datepicker

angularjs

angular-ngmodel