Differences in time displayed as hh:mm format

Question

Differences in time displayed as hh:mm format

My current challenge involves calculating the time difference using a specific function:

const calcTimeDiff = (time1: string, time2: string) => {
    const timeStart = new Date()
    const timeEnd = new Date()
    const valueStart = time1.split(':')
    const valueEnd = time2.split(':')

    timeStart.setHours(+valueStart[0], +valueStart[1], 0, 0)
    timeEnd.setHours(+valueEnd[0], +valueEnd[1], 0, 0)

    const difference = timeEnd.getTime() - timeStart.getTime()
    return format(difference, 'HH:mm') // date-fns
}

I provided calcTimeDiff('08:45', '16:00') as an example where the expected output is 07:15. Surprisingly, I am getting 08:15. My suspicion leans towards timezone discrepancies causing this discrepancy.

In my attempt to debug the code, I came across the following findings:

console.log(difference, timeStart, timeEnd)
Thu Jan 01 1970 08:15:00 GMT+0100, Wed Aug 17 2022 08:45:00 GMT+0200, Wed Aug 17 2022 16:00:00 GMT+0200

javascript typescript

Answer 1

Answer №1

Utilize the built-in intervalToDuration method available in the date-fns library to simplify your code. This function will provide you with an object containing information such as years, months, days, and hours.

{years: 0, months: 0, days: 0, hours...}

You can easily integrate this into your existing function like this:

const calculateTimeDifference = (time1: string, time2: string) => {
    const startTime = new Date()
    const endTime = new Date()
    const startValues = time1.split(':')
    const endValues = time2.split(':')

    startTime.setHours(+startValues[0], +startValues[1], 0, 0)
    endTime.setHours(+endValues[0], +endValues[1], 0, 0)

    return intervalToDuration({ start: startTime, end: endTime })
}

Answer 2

Utilize the built-in intervalToDuration method available in the date-fns library to simplify your code. This function will provide you with an object containing information such as years, months, days, and hours.

{years: 0, months: 0, days: 0, hours...}

You can easily integrate this into your existing function like this:

const calculateTimeDifference = (time1: string, time2: string) => {
    const startTime = new Date()
    const endTime = new Date()
    const startValues = time1.split(':')
    const endValues = time2.split(':')

    startTime.setHours(+startValues[0], +startValues[1], 0, 0)
    endTime.setHours(+endValues[0], +endValues[1], 0, 0)

    return intervalToDuration({ start: startTime, end: endTime })
}

Answer 3

Answer №2

When dealing with time strings in the format hh:mm, there is no need to use the Date object. Simply perform the following calculation:

const calcTimeDifference = (time1: string, time2: string) => {
  const [h1, m1] = time1.split(':');
  const [h2, m2] = time2.split(':');
  let diff = (h2 - h1) * 60 + (m2 - m1);
  if (diff < 0) diff += 24 * 60;
  const hours = Math.floor(diff / 60);
  const minutes = diff - hours * 60;
  const hh = hours.toString().padStart(2, '0');
  const mm = minutes.toString().padStart(2, '0');
  return `${hh}:${mm}`;
}

Answer 4

When dealing with time strings in the format hh:mm, there is no need to use the Date object. Simply perform the following calculation:

const calcTimeDifference = (time1: string, time2: string) => {
  const [h1, m1] = time1.split(':');
  const [h2, m2] = time2.split(':');
  let diff = (h2 - h1) * 60 + (m2 - m1);
  if (diff < 0) diff += 24 * 60;
  const hours = Math.floor(diff / 60);
  const minutes = diff - hours * 60;
  const hh = hours.toString().padStart(2, '0');
  const mm = minutes.toString().padStart(2, '0');
  return `${hh}:${mm}`;
}

Answer 5

Answer №3

I concur with @eugene and believe that is the correct approach. However, if you require an answer in the format of your current code, here is a sample:

function calculateTimeDifference(startTime, endTime) {
    const timeStart = new Date()
    const timeEnd = new Date()
    const startTimeValues = startTime.split(':')
    const endTimeValues = endTime.split(':')

    timeStart.setHours(+startTimeValues[0], +startTimeValues[1], 0, 0)
    timeEnd.setHours(+endTimeValues[0], +endTimeValues[1], 0, 0)

    let difference = new Date();
    difference.setHours(timeEnd.getHours() - timeStart.getHours())
    difference.setMinutes(timeEnd.getMinutes() - timeStart.getMinutes())
    return console.log(difference, timeStart, timeEnd) // utilizing date-fns library
}
calculateTimeDifference('08:45', '16:00');

If you continue generating a date object based on the time difference in your code, it will result in an arbitrary time.

Answer 6

I concur with @eugene and believe that is the correct approach. However, if you require an answer in the format of your current code, here is a sample:

function calculateTimeDifference(startTime, endTime) {
    const timeStart = new Date()
    const timeEnd = new Date()
    const startTimeValues = startTime.split(':')
    const endTimeValues = endTime.split(':')

    timeStart.setHours(+startTimeValues[0], +startTimeValues[1], 0, 0)
    timeEnd.setHours(+endTimeValues[0], +endTimeValues[1], 0, 0)

    let difference = new Date();
    difference.setHours(timeEnd.getHours() - timeStart.getHours())
    difference.setMinutes(timeEnd.getMinutes() - timeStart.getMinutes())
    return console.log(difference, timeStart, timeEnd) // utilizing date-fns library
}
calculateTimeDifference('08:45', '16:00');

If you continue generating a date object based on the time difference in your code, it will result in an arbitrary time.

Answer 7

Answer №4

This is how I tackled the problem:

function calculateTimeDifference(start: string, end: string) {
    const startTime = new Date()
    const endTime = new Date()
    const startValues = start.split(':')
    const endValues = end.split(':')

    startTime.setHours(+startValues[0], +startValues[1], 0, 0)
    endTime.setHours(+endValues[0], +endValues[1], 0, 0)

    const timeDiff = new Date(endTime.getTime() - startTime.getTime())

    return format(
        addMinutes(timeDiff, timeDiff.getTimezoneOffset()),
        'HH:mm'
    )
}

Answer 8

This is how I tackled the problem:

function calculateTimeDifference(start: string, end: string) {
    const startTime = new Date()
    const endTime = new Date()
    const startValues = start.split(':')
    const endValues = end.split(':')

    startTime.setHours(+startValues[0], +startValues[1], 0, 0)
    endTime.setHours(+endValues[0], +endValues[1], 0, 0)

    const timeDiff = new Date(endTime.getTime() - startTime.getTime())

    return format(
        addMinutes(timeDiff, timeDiff.getTimezoneOffset()),
        'HH:mm'
    )
}

Answer 9

Answer №5

If you want to achieve your desired outcome, try utilizing moment.js.

You can accomplish this by making use of the diff method.

const calculateTimeDifference = (startTime, endTime) => {
    
    const initialTime = moment(startTime, 'HH:mm');   
    const finalTime = moment(endTime, 'HH:mm');   
    
    let difference = finalTime.diff(initialTime);
    return moment.utc(difference).format("HH:mm");
}

console.log(calculateTimeDifference("8:15", "16:15"))
console.log(calculateTimeDifference("7:45", "19:21"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Answer 10

If you want to achieve your desired outcome, try utilizing moment.js.

You can accomplish this by making use of the diff method.

const calculateTimeDifference = (startTime, endTime) => {
    
    const initialTime = moment(startTime, 'HH:mm');   
    const finalTime = moment(endTime, 'HH:mm');   
    
    let difference = finalTime.diff(initialTime);
    return moment.utc(difference).format("HH:mm");
}

console.log(calculateTimeDifference("8:15", "16:15"))
console.log(calculateTimeDifference("7:45", "19:21"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Differences in time displayed as hh:mm format

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Changing background color using jQuery ID selector

Unable to activate Knockout data-bind using jQuery

The custom hook designed to clear and update time is not functioning as anticipated

Preventing a JavaScript function from executing multiple times

Merge a pair of observables to create a single combined output

Issues encountered when attempting to send a JSON object from Javascript to a Servlet using AJAX

What is the best way to view an image stored in a database in a separate window?

Set the new cloned div to be read-only within the dialog box

The flickering problem with HTML5 DOM

Loop through a JSON array in a React Native application

I do not intend for my JavaScript code to be echoed in PHP

Having trouble with implementing both filter and infinite scroll simultaneously in an Ionic list?

Combatting repetitive code through the use of Redux toolkit and actions

Managing ajax requests for lazy loading while scrolling through the middle of the window can be a challenging task. Here are some tips on

What steps are required to transform a TypeScript class with decorators into a proper Vue component?

Issue with document.Form.submit not working in combination with window.location in Chrome and some versions of IE 7 and 8

Perform an addition operation on two numerical values within an AJAX function

What is the method for changing the Uint8Array object into a string?

Guidelines for transferring data when a button is held down or pressed

Interactive calendar feature displaying events upon hovering over a date