如何在AngularJS中计算两个datetime对象的时间差

我是AngularJS的新手，我想计算two datetime object with format之间的时差:

小时:分钟:秒

但是我想在时间内得到两位数的输出:

期望输出:00:00:04

输入:

StartDate=2016-06-29 15:52:32.360
EndDate=2016-06-29 15:53:36.970
Expected output: 00 : 01 : 04

这是我的代码:

public class User
{
      public int Id { get; set; }
      public Nullable<System.DateTime> StartDateTime { get; set; }
      public Nullable<System.DateTime> EndDateTime { get; set; }
}
Json output:
[
  {
    "Id": 121,
    "StartDateTime": "/Date(1467195752360)/",  //2016-06-29 15:52:32.360
    "EndDateTime": "/Date(1467195756970)/", //2016-06-29 15:53:36.970
  },
  {
    "Id": 122,
   "StartDateTime": "/Date(1467195752360)/",// 2016-06-29 15:52:32.360
    "EndDateTime": "/Date(1467195758360)/", //2016-06-29 15:53:36.970
  }
]

代码:

 <td  ng-repeat="item in User">
      //How to display time difference here
      <p> Hour : Minutes : Seconds  </p
  </td>

可以使用ng-repeat:

中的filter来实现

var app = angular.module('app', []);
app.controller('mainCtrl', function ($scope) {
  $scope.timeSlots = [  
     {  
        "startDate":1467195752360,
        "endDate":1467195756970
     },
     {  
        "startDate":1467195752360,
        "endDate":1467195758360
     }
  ];
});
app.filter("getDiff", function() {
  return function(time) {
    var startDate = new Date(time.startDate);
    var endDate = new Date(time.endDate);
    var milisecondsDiff = endDate - startDate;
    
      return Math.floor(milisecondsDiff/(1000*60*60)).toLocaleString(undefined, {minimumIntegerDigits: 2}) + ":" + (Math.floor(milisecondsDiff/(1000*60))%60).toLocaleString(undefined, {minimumIntegerDigits: 2})  + ":" + (Math.floor(milisecondsDiff/1000)%60).toLocaleString(undefined, {minimumIntegerDigits: 2}) ;
  
  }
});

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
   <p ng-repeat = "time in timeSlots" ng-bind="time | getDiff">
</body>
</html>

你可以使用angular的"$filter"来格式化你的日期

工作柱塞:http://plnkr.co/edit/4QzT8688iQkIxoqnJVy0?p=preview

JS:

     // Declare the main module
 var myApp = angular.module('myApp', []);
 angular.module('myApp').controller('Ctrl1', ['$scope','$filter',  function($scope,$filter) {

   $scope.dates = [
     {
       "Id": 121,
       "StartDateTime": 1467195752360,  //2016-06-29 15:52:32.360
       "EndDateTime": 1467195756970, //2016-06-29 15:53:36.970
     },
     {
       "Id": 122,
      "StartDateTime": 1467195752360, // 2016-06-29 15:52:32.360
       "EndDateTime": 1467195758360, //2016-06-29 15:53:36.970
     }
   ];
   var compute = function(dates)  {
     for (var i in dates){
       dates[i].hours = $filter('date')(dates[i]["EndDateTime"]-dates[i]["StartDateTime"], 'hh') ; 
       dates[i].minutes = $filter('date')(dates[i]["EndDateTime"]-dates[i]["StartDateTime"], 'mm') ;
       dates[i].secondes = $filter('date')(dates[i]["EndDateTime"]-dates[i]["StartDateTime"], 'ss') ;
     }
   }
   compute($scope.dates);

 }]);

HTML:

<div ng-controller="Ctrl1">
       <div ng-repeat="date in dates">
  {{ date.hours }} :{{ date.minutes }} : {{date.secondes }}
  </div>
</div>

在angular中创建一个这样的函数

var timediff=function(){
var startdate=StartDate;//yr json date.
var enddate=EndDate;
// here we will split date time string to get date hour min sec invidually.
var arr=[];
arr=startdate.split(' ');//split date and time
date=arr[0];
var arr0=[];
arr0=date.split('-');//split date into yr,date, month
time=arr[1];
var arr1=[];
arr1=time.split(':');//split time into min , hour, sec
var datebegin = new Date(arr0[0], arr0[1]-1, arr0[2], arr1[0], arr1[1],arr1[2])
var arr=[];
arr=enddate.split(' ');
date=arr[0];
var arr0=[];
arr0=date.split('-');
time=arr[1];
var arr1=[];
arr1=time.split(':');
var dateend = new Date(arr0[0], arr0[1]-1, arr0[2], arr1[0], arr1[1],arr1[2])
var timeLeft =  dateend-datestart  ;
parseTime(timeLeft);


}

make parse function

 var parseTime=function(diff){
 var msec = diff;
 var hh = Math.floor(msec / 1000 / 60 / 60);
 msec -= hh * 1000 * 60 * 60;
 var mm = Math.floor(msec / 1000 / 60);
 msec -= mm * 1000 * 60;
 var ss = Math.floor(msec / 1000);
msec -= ss * 1000;
 $scope.hh=hh;
  $scope.mm=mm;
 $scope.ss=ss;
 }

在代码中像这样使用这些作用域变量。

<p> {{hh}} : {{mm}} : {{ss}}</p>

相关内容

最新更新

热门标签：