Add Time Intervals in JavaScript the Easy Way
AHJ George
Add Time Intervals in JavaScript the Easy Way
You will not need any of these witching supplies to complete this tutorial. Image by the author.
Huuuff. A cold tightness worms its way down your spine.
Haaaaah. Your boss's frigid breath washes over your neck like an overflowing sewer. But you can’t tell them to hover somewhere else...they've been watching you like a hawk ever since the office time-tracking system broke.
Now, they're just there...hovering…breathing. Huffffff.
You tried writing your hours on a timesheet, but your boss is pretty busy with all that respiration. What if they didn't do the math right and mis-added your hours?
Here's how to take matters into your own hands with JavaScript. Haaaaa.
The Problem
You have a timesheet that looks like the contents of this
String:Each line contains a date followed by some time intervals. But they're not very cleanly written — some intervals are comma-separated, others have irregular spacing, etc.
Given these inconsistencies, it's probably good to assume no other guarantees. For instance, who says all the times will be from the same year? Nobody, that’s who. You want to add the hours together as robustly as possible.
The Solution
This is pretty easy. We start by creating a couple of regular expressions and a helper function. Then, we’ll just…Huuuuffh!
Ugh!! Boss, go chill somewhere for a second!
As I was saying, now we can complete the task with a three-step algorithm:
1. We split the timesheet string into individual lines and reduce over them to create an array of objects
2. For each iteration, we
A. Split the line around the year using
yearRegex, recording the date string B. Collect all time range intervals using
intervalsRegex C. Reduce over the time ranges, parsing each as a JavaScript Date object using the
parseDate helper and the date string from step 2.A3. Reduce over the array of objects to find the total hours
If you uncomment the
console.log(times); statement, you'll see an array containing objects like:The Benefits of This Method
Building an array of objects has a few distinct advantages over simply extracting the time intervals and adding them.
It makes for easy traversal after the fact. This is ideal if you want to do something like graph your daily times.
Saving the date string for each record allows the use of built-in JS date arithmetic methods following a call to
Date.parse.The object is a convenient place to store the results of calling
String.prototype.split, which might not be unique depending on whether two days included the same time intervals.Disadvantages of This Method
This solution isn't perfect:
It requires two big traversals — once over the result of splitting the timesheet, and then once over the
times object. To optimize this code, it’d likely be better to use a single reduce over an empty object containing totalHours and times as fields.It uses regular expressions that might get more complicated with a more complex format
Wrapping Up
You now know how to extract time from a messy timesheet. With a little extra effort, you could even build a full-on time clock. But then you wouldn't get to spend all that nice quality time getting to know your boss, would you? Huffff.
Like this project
Posted Jan 16, 2024
My tutorial on working with time intervals in JavaScript made the HackerNoon front page!
