I would like to create a function to calculate/sum the time. For Example I work 40 hours per week and I want to sum all hours and minutes of each Day which I worked to find out how many hours did I work. I tried with Moment.js but no luck :/
var fTime = document.querySelector('input[id="fromTime"]').value;
var tTime = document.querySelector('input[id="toTime"]').value;
var btn = document.querySelector(".btn");
var sum = document.querySelector(".sum");
var reset = document.querySelector(".reset");
btn.onclick = sumTimes;
function sumTimes(){
sum.innerHTML = "You Worked " + tTime + " hours";
reset.style.opacity = 1;
}
reset.onclick = (e)=>sum.innerHTML = "00:00"div.hours{
width:300px;
background-color:red;
heigth:70px;
text-align:center;
color:white;
display:flex;
flex-direction:column;
align-items:center;
}
.hours > *{
margin:3px;
}
.reset{
opacity:0;
}<div class="wrapper">
<div class="hours">
<h2>Your Time</h2>
<label for="fromTime">From: </label>
<input id="fromTime" type="time" name="fromTime" value="13:30">
<label for="toTime">To: </label>
<input id="toTime" type="time" name="toTime" value="14:30">
<button class="btn">Enter</button>
<div class="sum">00:00</div>
<button class="reset">Reset</button>
</div>
</div>We can calculate the totalMinutes worked by splitting the from time and to time into their hour and minute components.
Once we have the total minutes worked, we can format this as hours and minutes using a minutesToHoursAndMinutes() function.
If we enter a To: time that is earlier than the From: time, we'll show an error rather than trying to show a negative time.
I've added a getTotalMinutesWorked() function that will calculate the total minutes worked from the user inputs.
var btn = document.querySelector(".btn");
var sum = document.querySelector(".sum");
var reset = document.querySelector(".reset");
btn.onclick = sumTimes;
function getTotalMinutesWorked() {
const fromTime = document.getElementById('fromTime').value;
const toTime = document.getElementById('toTime').value;
const [fromHours, fromMinutes] = fromTime.split(':');
const [toHours, toMinutes] = toTime.split(':');
// Total minutes worked is calculated by getting the difference in hours x 60 and adding the difference in minutes.
return (toHours - fromHours) * 60 + (toMinutes - fromMinutes);
}
function sumTimes() {
const totalMinutes = getTotalMinutesWorked();
if (totalMinutes < 0) {
sum.innerHTML = "The To time should be later than From time"
return;
}
sum.innerHTML = "You Worked " + minutesToHoursAndMinutes(totalMinutes) + " hours";
reset.style.opacity = 1;
}
function minutesToHoursAndMinutes(minutes) {
const hours = Math.floor(minutes / 60);
const mins = (minutes % 60);
return (hours + '').padStart(2, '0') + ':' + (mins + '').padStart(2, '0')
}
reset.onclick = (e)=>sum.innerHTML = "00:00"div.hours{
width:300px;
background-color:red;
heigth:70px;
text-align:center;
color:white;
display:flex;
flex-direction:column;
align-items:center;
}
.hours > *{
margin:3px;
}
.reset{
opacity:0;
}<div class="wrapper">
<div class="hours">
<h2>Your Time</h2>
<label for="fromTime">From: </label>
<input id="fromTime" type="time" name="fromTime" value="13:30">
<label for="toTime">To: </label>
<input id="toTime" type="time" name="toTime" value="14:30">
<button class="btn">Enter</button>
<div class="sum">00:00</div>
<button class="reset">Reset</button>
</div>
</div>You can do it by using moment.js
look the following article:
use moment js for difference two dates
or pure javascript code
//sumTimes();
function sumTimes(){
var day1 = Date.parse('01/01/1900 14:00');
var day2 = Date.parse('01/01/1900 19:00');
var diff = Math.abs(day2 - day1);
console.log(diff);
}
this will give difference by miliseconds.