Easily manipulate time using javascript

Calculating time has been a headache for developers for a long time. Especially when you have to do it using javascript, it’s definitely a nightmare. But moment.js has made it very easy now. Moment.js is used to parse, validate, manipulate, and display dates in JavaScript. You can download it from here http://momentjs.com/

Recently I got a job calculating time from a timesheet. In which people fill in Start Time, Break Time, Finish Time & Overtime. And I had to calculate the total working time. So the formula goes something like this.

Start Time + Finish Time + Overtime – Luch Break = Total Working Hours

So first we have the values like this.

var start_time = '10:00';
var finish_time = '18:00';
var break_time = '01:00';
var overtime = '00:30';

Next, we have to split out all-time into hours and minutes. So it will be done like this.

var start_hour = start_time.split(':')[0];
var start_minute = start_time.split(':')[1];
var finish_hour = finish_time.split(':')[0];
var finish_minute = finish_time.split(':')[1];
var break_hour = break_time.split(':')[0];
var break_minute = break_time.split(':')[1];
var overtime_hour = overtime_time.split(':')[0];
var overtime_minute = overtime_time.split(':')[1];

Now what we need is the time difference between Start Time & End Time.
We can get the difference like this using moment.js

var difference = moment.utc(moment(finish_time,"HH:mm").diff(moment(start_time,"HH:mm"))).format("HH:mm");

Here you can see moment.js provides a very simple .diff() method. This will give you the difference between 2 times. And in the end, I have formatted it into Hours. The reason to pass these values into moment() method is that they are strings and then need to be converted into ‘moment’ object to take full advantage of its methods.

Now next we have to add overtime to this difference. But for that, we have to convert this difference into ‘duration’ object.

// create duration object duration 
var duration = moment.duration(difference);

And using the duration object, we can easily add our overtime to the time difference we got.

// add overtime
duration.add(break_hour + ':00', 'hours');
duration.add('00:' + break_minute, 'minutes');

The reason why I had to use 2 separate lines for hours and minutes is that the add() method supports only one unit at a time. Now same way, we will subtract break time.

// subtract the break time 
duration.subtract(break_hour + ':00', 'hours'); 
duration.subtract('00:' + break_minute, 'minutes');

And finally, format the end result which is the total working hours.

// format a string result 
var total_working_hours = moment.utc(+duration).format('H:mm');

And That’s it. That was pretty quick to do. The final script will look like this.

var start_time = '10:00';
var finish_time = '18:00';
var break_time = '01:00';
var overtime = '00:30';
var start_hour = start_time.split(':')[0];
var start_minute = start_time.split(':')[1];
var finish_hour = finish_time.split(':')[0];
var finish_minute = finish_time.split(':')[1];
var break_hour = break_time.split(':')[0];
var break_minute = break_time.split(':')[1];
var overtime_hour = overtime_time.split(':')[0];
var overtime_minute = overtime_time.split(':')[1]; 

// get the difference 
var difference = moment.utc(moment(finish_time,"HH:mm").diff(moment(start_time,"HH:mm"))).format("HH:mm"); 

// create duration object duration 
var duration = moment.duration(difference); 

// add overtime 
duration.add(break_hour + ':00', 'hours'); 
duration.add('00:' + break_minute, 'minutes'); 

// subtract the break 
duration.subtract(break_hour + ':00', 'hours'); 
duration.subtract('00:' + break_minute, 'minutes'); 

// format a string result 
var total_working_hours = moment.utc(+duration).format('H:mm');