Kevin Powell - Community•14mo ago

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

kamiOP•14mo 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•14mo 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

kamiOP•14mo 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•14mo 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

kamiOP•14mo 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•14mo 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

kamiOP•14mo ago

ahhh good idea ill try that, thanks

Gaming

Programming

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