加载时将日期字符串解析为 Date 对象 Angular UI Bootstrap Datepicker

Question

我正在使用 Angular UI Bootstrap 日期选择器： https://angular-ui.github.io/bootstrap/#/datepicker

当我使用从服务器接收到的数据呈现表单时，日期时间字段出现问题。我的输入日期选择器如下所示：

<form name="itemForm">
    <input type="datetime" class="form-control" id="startedAt" name="startedAt"
           ng-model="item.startedAt"
           ng-click="open($event, 'startedAt')"
           uib-datepicker-popup="yyyy-MM-dd"
           is-open="datepickers.startedAt"
    />
</form>

我的服务器 returns 响应日期时间为 JSON 字符串：

{    
   ...
   startedAt: "2015-05-29T02:00:00+0200"
}

当我将响应数据分配给模型 $scope.item = response; 时，日期选择器输入字段被正确呈现（正确的日期是 selected 并且它的格式正确，格式为 I selected）。问题是验证没有通过。我得到：

itemForm.startedAt.$invalid == true

我注意到绑定到日期选择器字段的数据应该是 Date 对象而不是字符串（当我 select 来自日期选择器的新日期时，$scope.item.startedAt 是一个 Date)

我设法解决了这个问题并在控制器中执行此操作：

$scope.item = response;
$scope.item.startedAt = new Date($scope.item.startedAt);

它是这样工作的...但我不想每次从服务器收到响应时都手动转换字符串 do date。我试图创建一个指令，我可以将其分配给日期选择器输入字段，以便它为我转换 ng-model：

.directive("asDate", function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {

            modelCtrl.$formatters.push(function (input) {

                var transformedInput = new Date(input);

                if (transformedInput != input) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

                return transformedInput;
            });
        }
    }
})

很好，因为现在我可以看到 Date 对象，当我在我的视图中输出模型时：{{item.startedAt}}。但是仍然验证失败！我怀疑这是我理解数据如何在模型和视图之间流动以及 UI Bootstrap 如何挂接到它的问题。

此外，当我将指令从 $formatters.push 更改为 $formatters.unshift 时，验证工作正常，但日期选择器没有格式化我的日期时间（由 nicely formattet yyyy-MM-dd 代替，我在里面看到了 ISO 字符串输入）

Answer 1

从 Angular.UI.Bootstrap v0.13.2 (8-2-2015) 开始降级到 0.13.1 有效，这就是我今天遇到的问题。

Wesleycho 说这是故意的 https://github.com/angular-ui/bootstrap/issues/4690

如果有人有建议，我准备好使用其他支持字符串的日期选择器

...发布这篇文章后不久，我走上了一条我并不引以为豪的非angular道路，但它适用于HTML5 type="date"和uib-datepicker-弹出窗口。我有一个正则表达式来确定一个字符串是否类似于我见过的两种序列化日期格式之一，然后我有一个递归 javascript 函数来遍历 json 树并将这些字符串替换为 Date ().您可以在输入 $scope（或 viewmodel）之前调用它 ...

$http.get("../api/comm/" + commId
    ).success(function (resp) {
        fixDates(resp);
        vm.comm = resp;
    });

（我不需要检查字符串长度，但我认为如果字符串显然不是日期，那么通过不运行正则表达式可以节省一些 cpu 周期）

//2015-10-01T00:00:00-04:00
//2015-11-20T18:15:56.6229516-05:00
var isDate = new RegExp("\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{7})?-\d{2}:00");

function fixDates(json) {
    for (i in json)
        if (typeof (json[i]) == "object")
            fixDates(json[i]);
        else if (typeof (json[i]) == "string" && (json[i].length == 25 || json[i].length == 33) && isDate.test(json[i]))
            json[i] = new Date(json[i]);
};

Answer 2

由于这是 angular-ui-bootstrap 日期选择器 (https://github.com/angular-ui/bootstrap/issues/4690) 的故意行为，我最终使用了 Angular service/factory 和 moment 图书馆。

服务 dateConverter 可以全局注入以拦截所有 HTTP requestes/responses 或仅在所需的控制器中。

这里我使用 Restangular 库来处理对 REST API 的请求，因此 response.plain() 方法只接受对象属性，而不是 Restangular methods/properties.

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

Services
    .factory('dateConverter', ['dateFilter', function (dateFilter) {

        var dateConverter = {};

        dateConverter.prepareResponse = function (response) {
            for(prop in response.plain()) {
                if (response.hasOwnProperty(prop)) {
                    if(moment(response[prop], moment.ISO_8601, true).isValid()) {
                        response[prop] = new Date(response[prop]);
                    }
                }
            }
            return response;
        };

        dateConverter.prepareRequest = function (item) {
            for(prop in item.plain()) {
                if (item.hasOwnProperty(prop)) {
                    if(angular.isDate(item[prop])){
                         item[prop] = dateFilter(item[prop] , "yyyy-MM-ddTHH:mm:ssZ")
                    }
                }
            }
            return item;
        };

        return dateConverter;
    }])
;

Answer 3

你可以在 restangular transformer 中将 String 转换为 Date，就像这样

RestangularConfigurer
  .addElementTransformer('<RESTRESOURCENAME>', false, function (element) {
      element.createDate = new Date(element.createDate);
      return element;
  })

加载时将日期字符串解析为 Date 对象 Angular UI Bootstrap Datepicker

Parse date string to Date object when loading Angular UI Bootstrap Datepicker

json

datepicker

angularjs

angular-ui

angular-ui-bootstrap