從Angular.js中的字符串解析日期

Question

我需要解析來自JSON數據的字符串中的一些日期。 如何在Angular中做到這一點？ 我嘗試直接應用Date.parse （ Date.parse({{ item.in_time}}) ），但這沒有用。 我還嘗試了json過濾器{{ item.out_time | json | date:'shortTime'}} {{ item.out_time | json | date:'shortTime'}} {{ item.out_time | json | date:'shortTime'}} 。 我想我需要一個自定義過濾器（例如： 如何在AngularJS中格式化JSON日期，但我不知道在應用程序中將其添加到何處

 var mockData = [{ "field1": "Annie Parker", "field2": "Structural Analysis Engineer", "field3": "Mybuzz", "in_time": '1483251003000', // this shows out correctly because it's pre-parsed "out_time": '1483251003000', }, { "field1": "John Diaz", "field2": "Tax Accountant", "field3": "Tagchat", "in_time": '01 Jan 2017 8:00:03', "out_time": '01 Jan 2017 9:00:03', }, { "field1": "Sean Bailey", "field2": "Senior Developer", "field3": "Voonder", "in_time": '01 Jan 2017 8:00:03', "out_time": '01 Jan 2017 10:00:03', }, { "field1": "Wanda Webb", "field2": "Biostatistician I", "field3": "Realcube", "in_time": '01 Jan 2017 5:00:03', "out_time": '01 Jan 2017 5:00:03', }]; var App = angular.module('myApp', []); function DataCtrl($scope, $http) { $scope.items = mockData; } 

 table, th, td { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='myApp'> <div ng-controller='DataCtrl'> <h1>Data</h1> <table class="row-border hover table table-bordered cb-data-table"> <tr> <th>In Time</th> <th>Out Time</th> <th>Diff</th> </tr> <tr ng-show="!items.length"> <td colspan="3" style="text-align: center">~ No Any Records ~</td> </tr> <tr ng-repeat="item in items"> <td>{{ item.in_time | date:'shortTime'}}</td> <td>{{ item.out_time | json | date:'shortTime'}}</td> <td></td> </tr> </table> 

Answer 1

在對象new Date()解析數據。

new Date(1483251003000)
new Date('01 Jan 2017 8:00:03')

之后，您可以在HTML中使用{{item.in_time | date: 'dd/MM/yyyy'}} {{item.in_time | date: 'dd/MM/yyyy'}}每個{{item.in_time | date: 'dd/MM/yyyy'}}為{{item.in_time | date: 'dd/MM/yyyy'}}

在我的項目中，我使用它並且它正在工作。

JS

for (var i = 0; i < temp.length; i++) {
    temp[i].Birthdate = new Date(response.data[i].Birthdate)
}

HTML

{{item.Birthdate  | date: 'dd/MM/yyyy'}}

Answer 2

在范圍對象中分配Date.parse() ，例如$scope.Parse= Date.parse;

那么您可以在html中調用Parse(item.out_time)

但是請檢查值1483251003000是否正確！

 var mockData = [{ "field1": "Annie Parker", "field2": "Structural Analysis Engineer", "field3": "Mybuzz", "in_time": '1483251003000', // this shows out correctly because it's pre-parsed "out_time": '1483251003000', }, { "field1": "John Diaz", "field2": "Tax Accountant", "field3": "Tagchat", "in_time": '01 Jan 2017 8:00:03', "out_time": '01 Jan 2017 9:00:03', }, { "field1": "Sean Bailey", "field2": "Senior Developer", "field3": "Voonder", "in_time": '01 Jan 2017 8:00:03', "out_time": '01 Jan 2017 10:00:03', }, { "field1": "Wanda Webb", "field2": "Biostatistician I", "field3": "Realcube", "in_time": '01 Jan 2017 5:00:03', "out_time": '01 Jan 2017 5:00:03', }]; var App = angular.module('myApp', []); function DataCtrl($scope, $http) { $scope.Parse= Date.parse; $scope.items = mockData; } 

 table, th, td { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='myApp'> <div ng-controller='DataCtrl'> <h1>Data</h1> <table class="row-border hover table table-bordered cb-data-table"> <tr> <th>In Time</th> <th>Out Time</th> <th>Diff</th> </tr> <tr ng-show="!items.length"> <td colspan="3" style="text-align: center">~ No Any Records ~</td> </tr> <tr ng-repeat="item in items"> <td>{{ Parse(item.in_time) | date:'shortTime'}}</td> <td>{{ Parse(item.out_time) | date:'shortTime'}}</td> <td></td> </tr> </table> 

Answer 3

 angular.module('app', []) .controller('vm', function($scope){ $scope.mockData = [{ "field1": "Annie Parker", "field2": "Structural Analysis Engineer", "field3": "Mybuzz", "in_time": '1483251003000', // this shows out correctly because it's pre-parsed "out_time": '1483251003000', }, { "field1": "John Diaz", "field2": "Tax Accountant", "field3": "Tagchat", "in_time": '01 Jan 2017 8:00:03', "out_time": '01 Jan 2017 9:00:03', }, { "field1": "Sean Bailey", "field2": "Senior Developer", "field3": "Voonder", "in_time": '01 Jan 2017 8:00:03', "out_time": '01 Jan 2017 10:00:03', }, { "field1": "Wanda Webb", "field2": "Biostatistician I", "field3": "Realcube", "in_time": '01 Jan 2017 5:00:03', "out_time": '01 Jan 2017 5:00:03', }]; }).filter('fdate', function(){ return function(input, formatin, formatout){ formatin = formatin || 'DD MMM YYYY HH:mm:ss'; formatout = formatout || 'D/M/YY HH:mm'; return (isNaN(input) ? moment(input, formatin) : moment(new Date(+input))).format(formatout); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <div ng-app='app' ng-controller='vm'> <ul> <li ng-repeat='item in mockData'>{{item.in_time | fdate}} - {{item.out_time | fdate}}</li> </ul> </div>