将日期绑定到输入字段

Question

我有这样的日期格式/Date(1495623815523)/。如何在普通dd-MM-yy格式的输入字段中绑定它。

var app=angular
  .module('plunker', [])
  .controller('MainCtrl', function($scope,$filter) {
    $scope.dateString = '/Date(1495623815523)/';
     $scope.formattedDate = $filter('jsonDate')($scope.dateString);
  })
app.filter('jsonDate', function () {    
    return function (date) {
        return new Date(date.match(/\d+/)[0] * 1);
    }
})

<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"  
      ng-model="dateString" 
    /><br>
   //its working for label<br>

   <label>{{dateString | jsonDate | date:'dd-MM-yyyy'}}</label>
  </form>
  
</section>

Answer 1

您必须使用正确的格式将ng-model值转换为 Date Object ，因为您使用的输入类型为“date”。

var app=angular
  .module('plunker', [])
  .controller('MainCtrl', function($scope,$filter) {
    $scope.dateString = '/Date(1495623815523)/';
     $scope.formattedDate = $filter('jsonDate')($scope.dateString);
     $scope.dateStringFormatted =$filter('date')($scope.formattedDate, "yyyy-MM-dd");
     console.log( $scope.dateStringFormatted);
  })
app.filter('jsonDate', function () {    
    return function (date) {   
        return new Date(date.match(/\d+/)[0] * 1);
    }
})

<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"  
      ng-model="dateStringFormatted" 
    /><br>
   //its working for label<br>

   <label>{{dateStringFormatted | date:'dd-MM-yyyy'}}</label>
  </form>
  
</section>

Answer 2

这应该有效

var app=angular
  .module('plunker', [])
  .controller('MainCtrl', function($scope,$filter) {
    $scope.dateString = new Date(1495623815523);
     $scope.formattedDate = $filter("date")($scope.dateString, 'dd-MM-yyyy');
  })
app.filter('jsonDate', function () {    
    return function (date) {
        return new Date(date.match(/\d+/)[0] * 1);
    }
})

<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"  
      ng-model="dateString" 
    /><br>
   //its working for label<br>

   <label>{{dateString | date:'dd-MM-yyyy'}}</label>
  </form>
  
</section>