将日期绑定到输入字段

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 模型值转换为具有正确格式的日期对象，因为您使用的是输入类型"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>