get (-) when i try too input the value for my input type="time"

error: (The specified value "08:-30" does not conform to the required format. The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.)
let startTime = document.getElementById("startTime");
let endTime = document.getElementById("endTime");
let totalTime = document.getElementById("totalTime");

function CalculateTotalTime() {
//console.log(startTime.value + " " + endTime.value);
//console.log("totaltime: " + totalTime.value);

const startTimeParts = startTime.value.split(":");
const startHours = parseInt(startTimeParts[0]);
const startMinutes = parseInt(startTimeParts[1]);
console.log("Hours:" + " " + startHours + " " + "Minutes: " + startMinutes);

const endTimeParts = endTime.value.split(":");
const endHours = parseInt(endTimeParts[0]);
const endMinutes = parseInt(endTimeParts[1]);
console.log("Hours:" + " " + endHours + " " + "Minutes: " + endMinutes);

const calculatedHours = endHours - startHours;
const calculatedMinutes = endMinutes - startMinutes;
const formattedTime = `${calculatedHours.toString().padStart(2, '0')}:${calculatedMinutes.toString().padStart(2, '0')}`;
totalTime.value = formattedTime;
}

// Add event listeners to the input elements to calculate the time difference
startTime.addEventListener("input", CalculateTotalTime);
endTime.addEventListener("input", CalculateTotalTime);
totalTime.addEventListener("input", CalculateTotalTime);
let startTime = document.getElementById("startTime");
let endTime = document.getElementById("endTime");
let totalTime = document.getElementById("totalTime");

function CalculateTotalTime() {
//console.log(startTime.value + " " + endTime.value);
//console.log("totaltime: " + totalTime.value);

const startTimeParts = startTime.value.split(":");
const startHours = parseInt(startTimeParts[0]);
const startMinutes = parseInt(startTimeParts[1]);
console.log("Hours:" + " " + startHours + " " + "Minutes: " + startMinutes);

const endTimeParts = endTime.value.split(":");
const endHours = parseInt(endTimeParts[0]);
const endMinutes = parseInt(endTimeParts[1]);
console.log("Hours:" + " " + endHours + " " + "Minutes: " + endMinutes);

const calculatedHours = endHours - startHours;
const calculatedMinutes = endMinutes - startMinutes;
const formattedTime = `${calculatedHours.toString().padStart(2, '0')}:${calculatedMinutes.toString().padStart(2, '0')}`;
totalTime.value = formattedTime;
}

// Add event listeners to the input elements to calculate the time difference
startTime.addEventListener("input", CalculateTotalTime);
endTime.addEventListener("input", CalculateTotalTime);
totalTime.addEventListener("input", CalculateTotalTime);
7 Replies
kami
kamiOP13mo ago
edit: i know it has to do with my calculation where if i have the end time 0 it will bugg out like that
Jochem
Jochem13mo ago
math on time is best done in unix epoch format convert start and end to epoch, subtract the two numbers, then convert back to hours and minutes from second
kami
kamiOP13mo ago
i am still very new too javascript so if you would have a article or reference about it i would love to read it is epoch a function?
Jochem
Jochem13mo ago
computers usually store time in a format that's called Unix Epoch or Unix Timestamp. It's simply a very big number which represents the number of seconds since 0:00 on January 1st 1970 working with times is a bit of a nightmare in Javascript though
kami
kamiOP13mo ago
hmm i see, my goal was too just have a start time and end time and get the total time for it. I thought it would be a little easier xd. You got some advice on what i could do instead or alternative way to do it? i am not trying to work with current time just with 2 times you put in yourself
Jochem
Jochem13mo ago
in this case, I'd probably convert time to seconds manually. Multiply hours by 3600, minutes by 60. Then take those two totals, subtract them, and then turn them back into hours and minutes
kami
kamiOP13mo ago
ahhh good idea ill try that, thanks
Want results from more Discord servers?
Add your server