在 AngularJS 指令中将字符串转换为日期

Question

我正在尝试转换字符串日期，以便它在类型设置为 'date' 的 html 输入上工作。

所以，我有以下 angular 应用程序：

(function() {

    var app = angular.module('test', []);

    app.controller('MainCtrl', function($scope) {
        $scope.load = function() {                       
            $scope.message='2017-12-23T00:00:00Z';
        };
    });

    app.directive('convertDate', function() {
        return {
            restrict: 'A',
            scope: {
                ngModel: '='
            },
            link: function (scope) {    
                console.log(scope);
                console.log(scope.ngModel);

                if (scope.ngModel) scope.ngModel = new Date(scope.ngModel);
            }
        };            
    });
})();

那么我的html如下：

     <div ng-controller='MainCtrl'>         
        <input type="date" convert-date  ng-model="message">            
        <button ng-click="load()">load</button>
    </div>

当我点击加载按钮时出现以下错误：

错误：[ngModel:datefmt]http://errors.angularjs.org/1.6.4/ngModel/datefmt?p0=2017-12-23T00%3A00%3A00Z

我知道这个错误是因为它是一个字符串，我需要一个日期，这是我的指令的原因。

但即使使用指令，我仍然会收到错误消息。

我错过了什么？

谢谢

科林

Answer 1

这是因为您在 ng-model 中使用相同的变量进行转换。所以它在你的指令转换它之前遇到了一个错误。

根据我的说法，您应该先将其转换，然后再分配给控制器中的 ng-model 变量。

像这样，

(function() {

    var app = angular.module('test', []);

    app.controller('MainCtrl', function($scope) {
        $scope.load = function() {
            var dateString = '2017-12-23T00:00:00Z';
            $scope.message=new Date(dateString);
        };
    });

})();

无需使用指令

Answer 2

您可以将指令更改为以下内容：

 angular.module('app').directive('convertDate', function() {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ctrl) {
        if (!ctrl) return;

        ctrl.$parsers.push(function(date) {
          if (angular.isDate(date))
            return new Date(date);
        })
      }
    }
  })

看看这个工作正常的 plunkr 没有错误 https://plnkr.co/edit/8aSR1dlsRfDMrM7GfQQa?p=preview

在 AngularJS 指令中将字符串转换为日期

Convert string to date in AngularJS directive

angularjs

angularjs-directive

angularjs-ng-model