I am very new in AngularJS and I want to calculate time difference between two datetime object with format:
Hour:Minutes:Seconds
But I want to get double digit output in time :
Expected Output: 00 : 00 : 04
Input:
StartDate=2016-06-29 15:52:32.360
EndDate=2016-06-29 15:53:36.970
Expected output: 00 : 01 : 04
This is my code:
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
}
]
Code:
<td ng-repeat="item in User">
//How to display time difference here
<p> Hour : Minutes : Seconds </p
</td>
I am very new in AngularJS and I want to calculate time difference between two datetime object with format:
Hour:Minutes:Seconds
But I want to get double digit output in time :
Expected Output: 00 : 00 : 04
Input:
StartDate=2016-06-29 15:52:32.360
EndDate=2016-06-29 15:53:36.970
Expected output: 00 : 01 : 04
This is my code:
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
}
]
Code:
<td ng-repeat="item in User">
//How to display time difference here
<p> Hour : Minutes : Seconds </p
</td>
- 1 don't care about them. What you do to try this ? – AlainIb Commented Jul 5, 2016 at 14:34
- How would you pare said dates in javascript? – Kevin B Commented Jul 5, 2016 at 14:36
- is this your datetime is a string from bootstrap datetime or its returned from JavaScript date – Vivek Singh Commented Jul 5, 2016 at 14:38
- @VivekSingh:This datetime is returned from server side method.you can consider web service – I Love Stackoverflow Commented Jul 5, 2016 at 14:39
- 1 Ok I will tell you a solution. – Vivek Singh Commented Jul 5, 2016 at 14:41
3 Answers
Reset to default 6You can achieve it using filter in ng-repeat:
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./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>You can use the "$filter" of angular to format the date to yours
a working plunker : 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 pute = 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') ;
}
}
pute($scope.dates);
}]);
HTML :
<div ng-controller="Ctrl1">
<div ng-repeat="date in dates">
{{ date.hours }} :{{ date.minutes }} : {{date.secondes }}
</div>
</div>
Make a function in angular like this.
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;
}
use these scope variable in your code like this.
<p> {{hh}} : {{mm}} : {{ss}}</p>