角度将字符串日期绑定到输入类型日期答案

【问题标题】：Angular bind string date to input type date角度将字符串日期绑定到输入类型日期
【发布时间】：2017-08-04 08:26:12
【问题描述】：

我正在使用 Angular 1.6，我想直接将字符串绑定到日期类型的输入，而不必将日期转换为日期然后绑定到输入。原因是我从服务器获取 JSON（以及其他数据），我不想仅为日期创建中间变量，我想直接使用 JSON，因此我可以按原样回发我的 JSON当输入字段有修改并且不需要使用 ng-change 和转换日期并将其放入我的 JSON 等时...我有plunkered 我的问题。

这里是html：

<body ng-app="plunker" ng-controller="MainCtrl">
  <form name="myForm">
    <label for="exampleInput">Date input</label>
    <input type="date" id="exampleInput" name="input" ng-model="date" placeholder="yyyy-MM-dd"/>
  </form>
</body>

这里是javascript：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.dateString = '2017-01-31';
  $scope.date = new Date(2017, 11, 31);
});

如果我将输入绑定到变量 $scope.date 是可以的，但是如果我将它绑定到变量 $scope.dateString 则是 KO。

【问题讨论】：

正确的方法是使用Date对象，然后，如果你想显示那个日期，你可以在它上面应用一个过滤器{{ date | date }}。您可以在收到 json 时将 Date 对象实例化到服务中。
你可以使用ngModelController函数和自定义解析器和查看器docs.angularjs.org/api/ng/type/…
@Hitmands :thanx 但不能满足我的需要
@Icycool ：没那么简单，但似乎是最好的解决方案，thanx

标签： javascript angularjs json date

【解决方案1】：

您可以使用输入的 value 属性来做到这一点，如下所示：

angular
  .module('plunker', [])
  .controller('MainCtrl', function($scope) {
    $scope.dateString = '2017-01-31';
    $scope.date = new Date(2017, 11, 31);
  })
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="plunker" ng-controller="MainCtrl">
  
  <form name="myForm">
    <label for="exampleInput">Date input</label>
    
    <input 
      type="date" value="{{dateString | date : 'yyyy-MM-dd'}}" 
      ng-model="dateString" placeholder="yyyy-MM-dd"
    />
  </form>
  
</section>

【讨论】：

thanx，它似乎可以工作，但我在控制台中有错误：“错误：[ngModel:datefmt] errors.angularjs.org/1.5.11/ngModel/datefmt?p0=2017-01-31”并根据 anguar doc：AngularJS 没有在在这种情况下，因为这些错误会显示给用户
@JeanJacques $scope. dateString 根本不应该存在... {{ date | date: 'yyyy-MM-dd' }} 而是

【解决方案2】：

占位符属性不适用于输入类型日期。您可以通过将输入类型更改为文本来实现此目的。

  <input type="text" onfocus="(this.type='date')" placeholder="{{some_date_holder}}"/>

Read this了解更多详情。

【讨论】：