Question

所以我对AngularJS上的datepicker指令有问题。输入已分配指令以及ng模型，但在有人选择日期时不会更新模型。但是，如果在选择日期之后，您直接在输入字段上手动修改日期，则会更新日期。

这是我的指示：

.directive('jqdatepicker', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModelCtrl) {
                element.datepicker({
                    dateFormat: 'yy-mm-dd',
                    changeMonth: true,
                    changeYear: true,
                    onSelect: function (date) {
                        scope.date = date;
                        scope.$apply();
                    }
                });
            }
        };
    });

这是我的HTML输入：

<input type="datetime" class="form-control" ng-model="selectedUser.birthday" jqdatepicker />

注意：该字段位于从控制器调用的模式上，如下所示：

$modalInstance = $modal.open({
    scope: $scope,
    templateUrl: 'views/modal_user_form.html',
    windowClass: "animated flipInY"
});

提前致谢。

Answer 1

仅使用onClose事件代替onSelect即可，但我发现代码中存在小错误 - 您应该使用ngModelCtrl：

.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true,
                onSelect: function (date) {
                    scope.$apply(function() { 
                      ngModelCtrl.$setViewValue(date);
                    });
                }
            });
        }
    };
});

Plunker：http://plnkr.co/edit/kU5g5ov1tduycjd8tUWN?p=preview

更改日期时间字段时未更新的ng-model

1 个答案: