Develop Reference

How to reduce time using Javascript?

How can I use reduce() to calculate the total of all times (in string format) in the following array?
time["00:30", "01:45", "02:33"]
times.reduce((time, nextTime) => time + nextTime, 0)
I was thinking I need to split(":"), parseInt() and some more calculations or is there an easier way to do this?

If you can use an open JavaScript library like moment.js, the following is simple and preserves your string formatted times.
Note that I'm passing in "00:00" as the default value to reduce() so that times are calculated from a zero baseline, which also follows the string formatting that we'll use for all other values in the array.
const times["00:30", "01:45", "02:33"]
const totalTime = times.reduce((time, nextTime) => {
return moment(time, "hh:mm")
.add(nextTime, "hh:mm")
.format("hh:mm");
}, "00:00");
console.log("total time -->", totalTime);
// total time --> "04:48"
If we added logging inside reduce() to view the accumulation of values:
"12:30"
"02:15"
"04:48"
"total time -->" "04:48"
Notice that the result after the first pass was "12:30". If all times in the array summed to less than one clock hour the end result may not be acceptable for your particular use case.

This worked for me, this function timer is taking 2 times hh:mm:ss and splits it, divides, and then adds them together and after, it formats it to hh:mm:ss again
function timer(tempo1, tempo2) {
var array1 = tempo1.split(":");
var tempo_seg1 =
parseInt(array1[0]) * 3600 + parseInt(array1[1]) * 60 + parseInt(array1[2]);
var array2 = tempo2.split(":");
var tempo_seg2 =
parseInt(array2[0]) * 3600 + parseInt(array2[1]) * 60 + parseInt(array2[2]);
var tempofinal = parseInt(tempo_seg1) + parseInt(tempo_seg2);
var hours = Math.floor(tempofinal / (60 * 60));
var divisorMinutes = tempofinal % (60 * 60);
var minutes = Math.floor(divisorMinutes / 60);
var divisorSeconds = divisorMinutes % 60;
var seconds = Math.ceil(divisorSeconds);
var counter = "";
if (hours < 10) {
counter = "0" + hours + ":";
} else {
counter = hours + ":";
}
if (minutes < 10) {
counter += "0" + minutes + ":";
} else {
counter += minutes + ":";
}
if (seconds < 10) {
counter += "0" + seconds;
} else {
counter += seconds;
}
return counter;
}
export default timer;
and on my React App I used this code to keep track of the times and add them calling the timer function
const updateTime = () => {
let times = [];
let times2 = [];
if (todos.length > 1) {
for (let i = 0; i < todos.length; i++) {
times.push(todos[i].time + ":00");
}
times2 = times[0];
for (let i = 1; i < times.length; i++) {
times2 = timer(times2, times[i]);
}
times2 = times2.substr(0, 5);
} else if (todos.length == 1) times2 = todos[0].time;
else times2 = "No tasks";
return times2;
};
I only wanted hh:mm but for the sake of future implementation of seconds if needed, I'm going to add ":00" (seconds) and then remove it again using
times2 = times2.substr(0, 5);

JS/TypeScript Generate times between hours

So let's say we have two times:
7:30 - 12:00
So my question is how can I generate an array with times like this:
7:30, 8:00, 8:30, 9:00, 9:30, 10:00, 10:30, 11:00, 11:30
I need this for a booking, so let's say the business will open at 7:30 and every booking that you can make will be 30 min(this time can change, could be one hour or more)
Whats the best way to generate something like this in JS?

Little verbose utility, you can use it..
var getTimeIntervals = function (time1, time2, slotInMinutes, workingHourStart, workingHourEnd) {
time1.setMinutes(0); time1.setSeconds(0);
var arr = [];
var workingHoursStart = workingHourStart;
var workingHourEnds = workingHourEnd;
var workingHourStartFloat = parseFloat("7:30");
var workingHourEndFloat = parseFloat("12:00");
while(time1 < time2){
var generatedSlot = time1.toTimeString().substring(0,5);
var generatedSlotFloat = parseFloat(generatedSlot);
time1.setMinutes(time1.getMinutes() + slotInMinutes);
if(generatedSlotFloat >= workingHourStartFloat && generatedSlotFloat < workingHourEndFloat){
var generatedObject = {
slot: time1.toTimeString().substring(0,5),
timeStamp: new Date(time1.getTime())
};
arr.push(generatedObject);
}
}
return arr;
}
var today = new Date();
var tomrorow = new Date().setDate(today.getDate()+1);
console.log(getTimeIntervals(today, tomorrow, 30, "7:30", "12:00"));
Function getTimeIntervals expects startDate, endDate, slotDurationInMinutes, workingHoursStart and workingHourEnd.
Why I am returning object is because you may need the timestamp of selected slot in your further application use.
Fiddle - https://jsfiddle.net/rahulrulez/t8ezfj2q/

As the comment in the code says, you can remove the 0 before the hours if you don't want it, by removing that line.
If you don't want the end in the array just replace the <= by <in the for loop
function timeArray(start, end){
var start = start.split(":");
var end = end.split(":");
start = parseInt(start[0]) * 60 + parseInt(start[1]);
end = parseInt(end[0]) * 60 + parseInt(end[1]);
var result = [];
for ( time = start; time <= end; time+=30){
result.push( timeString(time));
}
return result;
}
function timeString(time){
var hours = Math.floor(time / 60);
var minutes = time % 60;
if (hours < 10) hours = "0" + hours; //optional
if (minutes < 10) minutes = "0" + minutes;
return hours + ":" + minutes;
}
console.log(timeArray("7:30", "12:00"));

A shorter version:
timeArray = [];
....
let i = 0;
let hour = 8;
let odd: boolean;
do {
odd = false;
if (i % 2 === 0) {
odd = true;
hour--;
}
this.timeArray.push(hour.toString() + (odd ? ":30" : ":00"));
i++;
hour++;
} while (i < 12);
....
Demo

Angular.js: Seconds to HH:mm:ss filter

I have a number of seconds count, for example, 713 seconds. How can I implement an Angular.js filter that converts this 713 seconds to HH:mm:ss format? In this case, it should be 00:11:53
<div>
{{ 713 | secondsToHHMMSS }} <!-- Should output 00:11:53 -->
</div>

Try something like this:
app.filter('secondsToDateTime', [function() {
return function(seconds) {
return new Date(1970, 0, 1).setSeconds(seconds);
};
}])
html:
<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b>
Demo

manzapanza's answer only works if the seconds are less than 86400 (1 day). The date object needs to be completely zero. Also, it would be better to return the actual date object so that angularjs does not have to make it again.
app.filter('secondsToDateTime', function() {
return function(seconds) {
var d = new Date(0,0,0,0,0,0,0);
d.setSeconds(seconds);
return d;
};
});
and
<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b>
Edit: If you want hours to go above 24 without wrapping to days it is better to not use Date:
app.filter('secondsToTime', function() {
function padTime(t) {
return t < 10 ? "0"+t : t;
}
return function(_seconds) {
if (typeof _seconds !== "number" || _seconds < 0)
return "00:00:00";
var hours = Math.floor(_seconds / 3600),
minutes = Math.floor((_seconds % 3600) / 60),
seconds = Math.floor(_seconds % 60);
return padTime(hours) + ":" + padTime(minutes) + ":" + padTime(seconds);
};
});
and
<b>{{seconds | secondsToTime}}</b>

Try this:
app.filter('secondsToHHmmss', function($filter) {
return function(seconds) {
return $filter('date')(new Date(0, 0, 0).setSeconds(seconds), 'HH:mm:ss');
};
})
html:
<b>{{seconds | secondsToHHmmss}}</b>

app.filter('formatTimer', function () {
return function (input) {
function z(n) { return (n < 10 ? '0' : '') + n; }
var seconds = input % 60;
var minutes = Math.floor(input % 3600 / 60);
var hours = Math.floor(input / 3600);
return (z(hours) + ':' + z(minutes) + ':' + z(seconds));
};
will output: 02:04:14

I think it is not necessary the custom filter
<b>{{hours}}{{seconds | date:':mm:ss'}}</b>
function Scoper($scope) {
$scope.seconds = '79000';
$scope.hours = parseInt($scope.seconds / 3600);
}

by #manzapanza solution for days:
$scope.duration_for = function(seconds){
if(!seconds) return
var duration = new Date(1970, 0, 1).setSeconds(seconds)
var mask = 'HH:mm'
if(seconds >= 86400){
mask = 'd days,' + mask
}
return $filter('date')(duration, mask);
}
in view:
{{duration_for(100500)}}

Sum of Time using javascript

How can I sum time in javascript?
01:00:00
00:30:00
00:30:00
I have times like above I want the sum of the given time, like
sum of above time = 02:00:00
If I use the JavaScript methods setHours() and setMinutes() these function replace old time and show newly added time like:
new Date(new Date(0, 0, 0, 00, 00, 00, 0)).setMinutes(30)
new Date(new Date(new Date(0, 0, 0, 00, 00, 00, 0)).setMinutes(30)).setMinutes(30);
The result of both conditions the same but I want here 00:30 + 00:30 = 01:00.

Some functions to help you go back and forth between the formatted length of time and seconds as an integer:
function timestrToSec(timestr) {
var parts = timestr.split(":");
return (parts[0] * 3600) +
(parts[1] * 60) +
(+parts[2]);
}
function pad(num) {
if(num < 10) {
return "0" + num;
} else {
return "" + num;
}
}
function formatTime(seconds) {
return [pad(Math.floor(seconds/3600)),
pad(Math.floor(seconds/60)%60),
pad(seconds%60),
].join(":");
}
You can use them to achieve what you want:
time1 = "02:32:12";
time2 = "12:42:12";
formatTime(timestrToSec(time1) + timestrToSec(time2));
// => "15:14:24"

Try this :
var time1 = "01:00:00";
var time2 = "00:30:00";
var time3 = "00:30:00";
var hour=0;
var minute=0;
var second=0;
var splitTime1= time1.split(':');
var splitTime2= time2.split(':');
var splitTime3= time3.split(':');
hour = parseInt(splitTime1[0])+parseInt(splitTime2[0])+parseInt(splitTime3[0]);
minute = parseInt(splitTime1[1])+parseInt(splitTime2[1])+parseInt(splitTime3[1]);
hour = hour + minute/60;
minute = minute%60;
second = parseInt(splitTime1[2])+parseInt(splitTime2[2])+parseInt(splitTime3[2]);
minute = minute + second/60;
second = second%60;
alert('sum of above time= '+hour+':'+minute+':'+second);

If you want to use a Date object for this, you can, you just have to be sure to include the current value for the unit you're changing when adding to it, like so:
var dt = new Date(0, 0, 0, 0, 0, 0, 0);
dt.setHours(dt.getHours() + 1); // For the 01:00
dt.setMinutes(dt.getMinutes() + 30); // For the first 00:30
dt.setMinutes(dt.getMinutes() + 30); // For the second 00:30
display("Hours: " + dt.getHours());
display("Minutes: " + dt.getMinutes());
function display(msg) {
var p = document.createElement("p");
p.innerHTML = String(msg);
document.body.appendChild(p);
}
Technically, of course, the first time you know getHours and getMinutes will return 0, but for consistency, best to just always include them.

This solution is perfect:
function timestrToSec(timestr) {
var parts = timestr.split(":");
return (parts[0] * 3600) +
(parts[1] * 60) +
(+parts[2]);
}
function pad(num) {
if(num < 10) {
return "0" + num;
} else {
return "" + num;
}
}
function formatTime(seconds) {
return [pad(Math.floor(seconds/3600)%60),
pad(Math.floor(seconds/60)%60),
pad(seconds%60),
].join(":");
}
but there is a little bug in the last function "formatTime" !
return [pad(Math.floor(seconds/3600)%60), => return [pad(Math.floor(seconds/3600)),
so without %60!!
Becouse if i have to sum hour, it can be greater than 60 (H)

This work for me:
function padnum(n){return n<10 ? '0'+n : n}
var time1 = "00:30";
var time2 = "00:60";
var minute=0;
var second=0;
var splitTime1= time1.split(':');
var splitTime2= time2.split(':');
minute = parseInt(parseInt(splitTime1[0]))+parseInt(splitTime2[0]);
second = parseInt(parseInt(splitTime1[1]))+parseInt(splitTime2[1]);
minute = minute + second/60;
minute =parseInt(minute);
second = second%60;
minute = padnum(minute);
second = padnum(second);
alert('sum of above time= '+minute+':'+second);

Here is a function with error handling included.
Even though it's a big function it results in an useful one-liner. Just pass an array with values and you're good to go.
function sumMinutes(values) {
const validate = time => {
if (time > 59 || time < 0) {
throw new Error(
"Hours, minutes and seconds values have to be between 0 and 59."
);
}
return time;
};
const seconds = values
.map(e => validate(Number(e.split(":").reverse()[0])))
.reduce((a, b) => a + b);
let minutes = values
.map(e => Number(e.split(":").reverse()[1]))
.reduce((a, b) => a + b);
let hours = values
.map(e =>
e.split(":").reverse()[2] ? Number(e.split(":").reverse()[2]) : 0
)
.reduce((a, b) => a + b);
minutes *= 60;
hours *= 3600;
let result = new Date((hours + minutes + seconds) * 1000)
.toISOString()
.substr(11, 8);
return result.split(":").reverse()[2] === "00" ? result.slice(3) : result;
}
/* examples */
const seconds = ["00:03", "00:9"];
const mins = ["01:20", "1:23"];
const hours = ["00:03:59", "02:05:01"];
const mix = ["00:04:58", "10:00"];
console.log(sumMinutes(seconds)); //'00:12'
console.log(sumMinutes(mins)); //'02:43'
console.log(sumMinutes(hours)); //'02:09:00'
console.log(sumMinutes(mix)); //'14:58'

Here how I handled, If you sum only hours, the function returns total hours and minutes, not days.
function timeToMins(time) {
var b = time.split(':');
return b[0] * 60 + +b[1];
};
function timeFromMins(mins) {
function z(n) {
if (n < 0) return ('-0' + (n).toString().slice(1));
return (n < 10 ? '0' : '') + n;
};
var h = (mins / 60 | 0);
var m = mins % 60;
return z(h) + ':' + z(m);
};
function addTimes(time0, time1) {
return timeFromMins(timeToMins(time0) + timeToMins(time1));
};
addTimes('02:30', '-00:30');
The output will be: 02:00
// Array [0] 01:00:00
// Array [1] 00:30:00
// Array [2] 00:30:00
let time = '01:00:00';
time = addTimes(time, '00:30:00');
time = addTimes(time, '00:30:00');
The output will be: 02:00

I did it keeping things simple.
This is my approach:
function sumTime(time1, time2) {
const splitTime1= time1.split(':');
const splitTime2= time2.split(':');
let hour = parseInt(splitTime1[0])+parseInt(splitTime2[0]);
let minute = parseInt(splitTime1[1])+parseInt(splitTime2[1]);
let second = parseInt(splitTime1[2])+parseInt(splitTime2[2]);
// Fix seconds, example: 400:60:124 -> 400:62:04
minute = minute + (Math.floor(second/60)); // 124 / 60 = 2.07 -> +2 minutes
second = Math.floor(second%60) // 124 % 60 = 4 -> 4 seconds
// Fix minutes, example: 400:62:04 -> 401:02:04
hour = hour + (Math.floor(minute/60)) // 62 / 60 = 1.03 -> +1 hour
minute = Math.floor(minute%60) // 62 % 60 = 2 -> 2 minutes
// Formatting fields
hour = hour.toString().padStart(2,'0');
minute = minute.toString().padStart(2,'0');
second = second.toString().padStart(2,'0');
return `${hour}:${minute}:${second}`;
}

Existing answers hardcode the hours minutes and seconds, but a dynamic approach is to split on the : delimiter and accumulate, multiplying each chunk by 60 and adding it to the next chunk. After doing this, the last element contains the total seconds, which can be converted to h:m:s.
const sumToSeconds = times => {
return times.reduce((a, e) => {
const parts = e.trim().split(":").map(Number);
parts.forEach((e, i) => {
if (i < parts.length - 1) {
parts[i+1] += e * 60;
}
});
return parts.pop() + a;
}, 0);
};
const times = [
"4:50",
"2:02",
"1:38",
"2:49",
"2:49",
"2:13",
"2:20",
"2:12",
"2:44",
"4:23",
"55:23",
"1:01:02",
];
const totalSeconds = sumToSeconds(times);
console.log(
`${~~(totalSeconds / 60 / 60)} hours, ${
~~((totalSeconds / 60) % 60)} minutes, ${
~~(totalSeconds % 60)} seconds`
); // => 2 hours, 24 minutes, 25 seconds
The h:m:s part can be made dynamic too, if desired:
const sumToSeconds = times => {
return times.reduce((a, e) => {
const parts = e.trim().split(":").map(Number);
parts.forEach((e, i) => {
if (i < parts.length - 1) {
parts[i+1] += e * 60;
}
});
return parts.pop() + a;
}, 0);
};
const toHMS = time => {
const labels = ["hours", "minutes", "seconds"];
return Object.fromEntries(
labels.map((e, i) => [
e,
~~(time / 60 ** (labels.length - i - 1)) % 60,
])
);
};
const times = [
"4:50",
"2:02",
"1:38",
"2:49",
"2:49",
"2:13",
"2:20",
"2:12",
"2:44",
"4:23",
"55:23",
"1:01:02",
];
console.log(toHMS(sumToSeconds(times)));
// => { hours: 2, minutes: 24, seconds: 25 }
As an aside, if I may nitpick on your question a bit,
01:00:00
00:30:00
00:30:00
isn't a great test case to pick because it doesn't exercise the code thoroughly. A test with some hour and minute values would be better.

Javascript clock based on custom time

I am using the following script below, and what I am trying to do is to set a custom time to the script and for it to auto update without the need to re-set the time each time. (I only want to set the time once and want my script to keep track of the time and display it)
When I run the script it displays: NaN:NaN:NaN AM
My Code is as follows:
<div id="js_clock"> display clock here </div>
<script language="javascript">
function js_clock(clock_time)
{
var clock_hours = clock_time.getHours();
var clock_minutes = clock_time.getMinutes();
var clock_seconds = clock_time.getSeconds();
var clock_suffix = "AM";
if (clock_hours > 11){
clock_suffix = "PM";
clock_hours = clock_hours - 12;
}
if (clock_hours == 0){
clock_hours = 12;
}
if (clock_hours < 10){
clock_hours = "0" + clock_hours;
}
if (clock_minutes < 10){
clock_minutes = "0" + clock_minutes;
}
if (clock_seconds < 10){
clock_seconds = "0" + clock_seconds;
}
var clock_div = document.getElementById('js_clock');
clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix;
setTimeout("js_clock()", 1000);
}
var serverTime = new Date("09:20:50");
js_clock(serverTime);
</script>

You have a problem creating the date, new Date("09:20:50"); returns Invalid Date.
if you want to set hours minutes and seconds use
new Date(year, month, day [, hour, minute, second, millisecond ])
or take a look here.
Also you forgot to pass a date to the setTimeout, try:
setTimeout(function() {
js_clock(new Date(/*pass hours minutes and seconds here*/))
}, 1000);

I think you've forgotten passing an argument to js_clock(). Maybe you shoud do:
setTimeout(
function() {
//Call the function again updating seconds by 1
js_clock(
new Date(
clock_time.getFullYear(),
clock_time.getMonth(),
clock_time.getDate(),
clock_time.getHours(),
clock_time.getMinutes(),
clock_time.getSeconds() + 1
)
);
},
1000
);
EDIT:
I missed the point this can be done with a single function call:
setTimeout(
function() {
js_clock(new Date(+clock_time + 1000));
},
1000
);
The +clock_time statement converts the Date object to milliseconds from the UNIX Epoch, so updating the time is as simple as summing 1000 milliseconds.
Thanks to user RobG ;-)

Your code has some serious flaws, such as the following.
setTimeout doesn't run at exactly the interval set, but as soon as it can afterward so this clock will slowly drift, sometimes by a lot.
Passing a string to Date and expecting it to be correctly parsed is problematic. In ECMA-262 ed 3 it was entirely implementation dependent, in ES5 the string is required to be a custom version of the ISO8601 long format (but note that not all browsers in use support ES5).
Lastly, if the client is busy, the function may not run for several seconds so the clock needs to be based on the client clock, then ajusted for the time difference.
The following function does all the above.
<script type="text/javascript">
var customClock = (function() {
var timeDiff;
var timeout;
function addZ(n) {
return (n < 10? '0' : '') + n;
}
function formatTime(d) {
return addZ(d.getHours()) + ':' +
addZ(d.getMinutes()) + ':' +
addZ(d.getSeconds());
}
return function (s) {
var now = new Date();
var then;
// Set lag to just after next full second
var lag = 1015 - now.getMilliseconds();
// Get the time difference if first run
if (s) {
s = s.split(':');
then = new Date(now);
then.setHours(+s[0], +s[1], +s[2], 0);
timeDiff = now - then;
}
now = new Date(now - timeDiff);
document.getElementById('clock').innerHTML = formatTime(now);
timeout = setTimeout(customClock, lag);
}
}());
window.onload = function() {
customClock('09:20:50');
}
</script>
<div id="clock"></div>

WAIT! just realised, this is still not showing the correct time. The error is gone, but the time isn't what you are looking for.
window.js_clock = function js_clock(clock_time) {
var clock_hours = clock_time.getHours();
var clock_minutes = clock_time.getMinutes();
var clock_seconds = clock_time.getSeconds();
var clock_suffix = "AM";
if (clock_hours > 11) {
clock_suffix = "PM";
clock_hours = clock_hours - 12;
}
if (clock_hours === 0) {
clock_hours = 12;
}
if (clock_hours < 10) {
clock_hours = "0" + clock_hours;
}
if (clock_minutes < 10) {
clock_minutes = "0" + clock_minutes;
}
if (clock_seconds < 10) {
clock_seconds = "0" + clock_seconds;
}
var clock_div = document.getElementById('js_clock');
clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix;
setTimeout("js_clock(new Date())", 1000);
}
var serverTime = new Date("09:20:50");
window.js_clock(serverTime);​