Question

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

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

但没有成功。

我确实有相同的代码:(编辑：删除了控制器语法并添加了$ 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＆＃39;而不是＆＃39; 22-10-2014＆＃39;。这是为什么？

编辑2 :(解决方案）

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

最新稳定版的AngularJS（~1.2.26）不支持输入[type =＆＃34; date＆＃34;]。该支持仅针对Angular的1.3分支添加，现在处于测试阶段。

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

Answer 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() : "";
            });
        }
    };
});

Answer 2

检查对象ng-model =＆＃34; 用户 .example.value＆＃34;你有没有初始化控制器内的用户对象。

//在控制器内

$ scope.user = {}; $ scope.user.example = {value：new Date（＆＃34; 2013年9月22日＆＃34;）}

Answer 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>

Answer 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();

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

4 个答案: