AngularJS -不能在视图中显示日期对象

AngularJS - Can't show date object in view

本文关键字：显示 日期 对象 视图 不能 AngularJS      更新时间：2023-09-26

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

我遵循这些文档: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 />

and my object:

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

但是我仍然得到一个错误

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

有谁知道是什么导致了这个问题吗?我试着在网上看，但我发现的所有答案都说日期对象无效，我很确定我的不是。(或者是??)

编辑:

由于很多人都很难理解我的问题是什么，让我用jsfiddle来说明:http://jsfiddle.net/j2kof5at/

在输出中我看到'dd-mm-2013'而不是'22-10-2014'。为什么会这样?

EDIT 2:(SOLUTION)

我尝试的解决方案之一是通过添加角输入日期模块到我的项目。我刚刚从我的项目中删除了这个，似乎问题已经解决了。阅读这个模块的文档，我发现:

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

因为我使用的是angular 1.5。X已经有本机支持，这个模块实际上是导致问题的原因。这也解释了为什么我的jsfddle不能工作，因为它使用的是angular 1.0.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() : "";
            });
        }
    };
});

查看对象ng-model="user.example。

//控制器内部

美元范围。用户= {};scope.user美元。example = {value: new Date("September 22, 2013")}

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>

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

ng-model对象:

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

在你的angular JS控制器中:

$scope.Patient = {};
$scope.Patient.AppointmentDate = new Date();
相关文章：