AngularJS - 无法在视图中显示日期对象答案

【问题标题】：AngularJS - Can't show date object in viewAngularJS - 无法在视图中显示日期对象
【发布时间】：2017-03-27 22:39:24
【问题描述】：

我试图在我的视图中显示一个日期对象。

我关注了这些文档：https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

但没有成功。

我确实有相同的代码：（编辑：删除了 controllerAs 语法并添加了 $scope）

<input type="date" name="birthDate" ng-model="example.value"
   placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />

还有我的对象：

$scope.example = {
     value: new Date(2013, 9, 22)
};

但我仍然收到错误

错误：[ngModel:datefmt] 预期 2013-10-22 是一个日期

有谁知道是什么导致了这个问题？我尝试在网上查找，但我找到的所有答案都说日期对象无效，我很确定我的不是。（或者是吗？？）

编辑：

由于很多人无法理解我的问题是什么，让我用一个 jsfiddle 来说明：http://jsfiddle.net/j2kof5at/

在输出中，我看到的是“dd-mm-2013”而不是“22-10-2014”。这是为什么呢？

编辑 2：（解决方案）

我尝试的解决方案之一是将 angular-input-date 模块添加到我的项目中。我刚刚从我的项目中删除了它，似乎问题已经解决了。阅读我发现的这个模块的文档：

AngularJS 的最新稳定版本 (~1.2.26) 不支持 input[type="date"]。仅添加了对 Angular 1.3 分支的支持，该分支现在处于测试阶段。

由于我使用的是 angular 1.5.x，因此已经有对此的本机支持，而这个模块实际上是导致问题的原因。这也解释了为什么我的 jsfddle 不起作用，因为那是使用 angular 1.0.1

【问题讨论】：

也许是that.example.value 而不是user.example.value
jsfiddle.net/lbclucascosta/8a7ppg4x
不，that.example.value 基本上是 $scope.example.value 并使用 ControllerAs 语法和 UserController 作为用户
在您提供的 jsfiddle 中，我看到的是 dd-mm-2013，而不是实际日期
stackoverflow.com/questions/14474555/…

标签： javascript angularjs html date

【解决方案1】：

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

【讨论】：

可能会尝试将此作为最后的手段，但我正在尝试了解它为什么不起作用，这并没有真正的帮助。我有日期字符串，我想在视图中将其显示为日期对象。这个指令似乎更适合在不同类型的输出中解析日期。

【解决方案2】：

检查对象 ng-model="user.example.value" 是否在控制器内初始化了用户对象。

//控制器内部

$scope.user= {}; $scope.user.example = {value: new Date("2013 年 9 月 22 日")}

【讨论】：

我知道你只是想帮助我，但你有看过我的帖子吗？
是的，我有。我要求您检查控制器函数中是否提到了 $scope.user = {}
它没有改变任何东西。我的观点是读取正确的变量，否则我的错误不会知道我的日期在“错误：[ngModel:datefmt] 预计 2013-10-22 是一个日期”中。 user.example.value = $scope.example.value
好的然后这样创建日期对象并检查。
$scope.example = { value: new Date(2013, 09, 22) };

【解决方案3】：

angular.module('app', [])
  .controller('Controller', function($scope) {
      $scope.user = {};
    $scope.user.example = {
     value: new Date("September 22, 2013")
};
  })

<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
  <input type="date" name="birthDate" ng-model="user.example.value"
   placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required /> 

  </div>
</body>

</html>

【讨论】：

感谢您的帮助，但没有。我使用 UserController 作为用户语法（在问题中明确说明并在 cmets 中提到）。

【解决方案4】：

这里我将 ng-model 对象的日期设置为当前日期

ng-model 对象：

<input id="AppointmentDate" type="date" ember-view" ng-model="Patient.AppointmentDate">

在你的 Angular JS 控制器中：

$scope.Patient = {};
$scope.Patient.AppointmentDate = new Date();

【讨论】：