Question

我从asp.net mvc控制器获取日期时间值为＆＃34; 2014-08-31T00：00：00Z＆＃34;。当我将此值绑定到我的angular-ui datepicker控件时，它的状态显示为ng-invalid ng-invalid-date。

我也从mvc控制器获取日期格式，所以我也在我的html中绑定日期格式。

当我在第1807行调试ui-bootstrap-tpls.js（最新版本）文件时

它始终是未定义的。我尝试了很多选择，但我无法成功。 :(

javascript does't convert angular ui datepicker date to UTC correctly

所以请提出一些想法并建议我如何解决这个问题。

谢谢＆amp;问候， N.Murali Krishna。

Answer 1

我遇到了同样的问题。问题是Angular期望一个实际的日期对象，而不是日期的字符串表示。在做了大量的研究之后，我最终在$ httpProvider中添加了一个transformReponse，它检查所有字符串对象，看看它们是否可以转换为日期，如果是，实际转换它们。

angular.module('test')
.config(['$httpProvider', function ($httpProvider) {

    // ISO 8601 Date Pattern: YYYY-mm-ddThh:MM:ss
    var dateMatchPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;

   var convertDates = function (obj) {
      for (var key in obj) {
         if (!obj.hasOwnProperty(key)) continue;

         var value = obj[key];
         var typeofValue = typeof (value);

         if (typeofValue === 'object') {
            // If it is an object, check within the object for dates.
            convertDates(value);
         } else if (typeofValue === 'string') {
            if (dateMatchPattern.test(value)) {
               obj[key] = new Date(value);
            }
         }
      }
   }

   $httpProvider.defaults.transformResponse.push(function (data) {
      if (typeof (data) === 'object') {
         convertDates(data);
      }

      return data;
   });
}])

Answer 2

这里有几点说明：

首先，datepicker指令要求ng-model为Date个对象。记录在案here。
其次，Chet上面发布（并接受）的解决方案非常严厉，因为它会在HTTP响应中收到每个日期字符串，如果它与硬编码模式匹配，则将其转换为Date对象。这不灵活，也不容易测试。对大多数人来说，这不是正确的解决方案。

如果在您的系统中，全局日期字符串转换是正确的行为，那么正确的Angular设计就是创建一个为您执行此操作的服务。这导致我......

我们（Angular UI Bootstrap）提供了一种通过Date服务将日期字符串转换为dateParser个对象的机制。您可以看到源代码here。 NB ：此服务名称已弃用，并在0.14.0版本中更改为uibDateParser。

Answer 3

这是我到目前为止找到的最佳解决方案：

.directive('uibDatepickerPopup', function (dateFilter, uibDateParser, uibDatepickerPopupConfig) {
    return {
        restrict: 'A',
        priority: 1,
        require: 'ngModel',
        link: function (scope, element, attr, ngModel) {
            var dateFormat = attr.uibDatepickerPopup || uibDatepickerPopupConfig.datepickerPopup;
            ngModel.$validators.date = function(modelValue, viewValue) {
                var value = viewValue || modelValue;

                if (!attr.ngRequired && !value) {
                    return true;
                }

                if (angular.isNumber(value)) {
                    value = new Date(value);
                }
                if (!value) {
                    return true;
                } else if (angular.isDate(value) && !isNaN(value)) {
                    return true;
                } else if (angular.isString(value)) {
                    var date = uibDateParser.parse(value, dateFormat);
                    return !isNaN(date);
                } else {
                    return false;
                }
            };
        }
    };
});

Answer 4

根据切特的回答，我没有足够的声誉来评论，但非常感谢这个解决方案对我有用！我不知道你的Github句柄在这个问题上标记你，但我在Angular UI下提交了一个Github问题，以帮助其他人找到解决方案，并希望Angular UI人员能够调查它。再次感谢！

https://github.com/angular-ui/bootstrap/issues/4554

Answer 5

要使用格式化日期字符串而不是Date对象作为Angular Datepicker的ng-model，您需要创建一个包装器指令。 wrapper指令将您的字符串解析为Date对象并将其传递给datepicker。选择日期时，它会从Date转换回字符串。以下是一个示例（Plunker）：

(function () {
    'use strict';

    angular
        .module('myExample', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
        .controller('MyController', MyController)
        .directive('myDatepicker', myDatepickerDirective);

    MyController.$inject = ['$scope'];

    function MyController ($scope) {
      $scope.dateFormat = 'dd MMMM yyyy';
      $scope.myDate = '30 Jun 2017';
    }

    myDatepickerDirective.$inject = ['uibDateParser', '$filter'];

    function myDatepickerDirective (uibDateParser, $filter) {
        return {
            restrict: 'E',
            scope: {
                name: '@',
                dateFormat: '@',
                ngModel: '='
            },
            required: 'ngModel',
            link: function (scope) {

                var isString = angular.isString(scope.ngModel) && scope.dateFormat;

                if (isString) {
                    scope.internalModel = uibDateParser.parse(scope.ngModel, scope.dateFormat);
                } else {
                    scope.internalModel = scope.ngModel;
                }

                scope.open = function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    scope.isOpen = true;
                };

                scope.change = function () {
                    if (isString) {
                        scope.ngModel = $filter('date')(scope.internalModel, scope.dateFormat);
                    } else {
                        scope.ngModel = scope.internalModel;
                    }
                };

            },
            template: [
                '<div class="input-group">',
                    '<input type="text" readonly="true" style="background:#fff" name="{{name}}" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="internalModel" is-open="isOpen" ng-click="open($event)" ng-change="change()">',
                    '<span class="input-group-btn">',
                        '<button class="btn btn-default" ng-click="open($event)">&nbsp;<i class="glyphicon glyphicon-calendar"></i>&nbsp;</button>',
                    '</span>',
                '</div>'
            ].join('')
        }
    }

})();

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body ng-app="myExample">
    <div ng-controller="MyController">
      <p>
        Date format: {{dateFormat}}
      </p>
      <p>
        Value: {{myDate}}
      </p>
      <p>
        <my-datepicker ng-model="myDate" date-format="{{dateFormat}}"></my-datepicker>
      </p>
    </div>
  </body>

</html>

Answer 6

只想将我的解决方案添加到此堆栈中。

app.directive('formatDate', function (dateFilter, uibDateParser, uibDatepickerPopupConfig) {
    return {
        restrict: 'A',
        priority: 1,
        require: 'ngModel',
        link: function (scope, element, attr, ngModel) {
            var dateFormat = attr.uibDatepickerPopup || uibDatepickerPopupConfig.datepickerPopup;
            ngModel.$validators.date = function(modelValue, viewValue) {
                var value = viewValue || modelValue;

                if (!attr.ngRequired && !value) {
                    return true;
                }

                if (angular.isNumber(value)) {
                    value = new Date(value);
                }
                if (!value) {
                    return true;
                } else if (angular.isDate(value) && !isNaN(value)) {
                    return true;
                } else if (angular.isString(value)) {
                    var date = new Date(value);
                    return !isNaN(date);
                } else {
                    return false;
                }
            }
            ngModel.$formatters.push(function(value) {
                return new Date(value);
            });
        }
    };
});

Answer 7

我通过将字符串转换为directive中的有效javascript格式解决了该问题：

请参见此处：Datepicker-popup formatting not working when value set initially in scope

当指定日期格式为＆＃39; d-M-yyyy＆＃39;时，Angular-UI日期选择器处于无效状态。和ng-model，字符串值为＆＃34; 2014-08-31T00：00：00Z＆＃34;

7 个答案: