当将日期格式指定为"dM-yyyy"时,Angular-UI日期选择器处于无效状态,而字符串值指定为"2014-08-31T00:00:00Z"的ng-model

Question

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

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

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

它总是以未定义的方式出现.我尝试了很多选择,但我无法成功.:(

javascript没有正确地将角度ui datepicker日期转换为UTC

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

谢谢和问候,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

这里有几点说明:

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

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

我们(Angular UI Bootstrap)提供了一种Date通过dateParser服务将日期字符串转换为对象的机制.你可以在这里看到源代码. 注意:此服务名称已弃用,并已更改为uibDateParser0.14.0版本.

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;
                }
            };
        }
    };
});