From milliseconds to hours: a straightforward conversion

Question

From milliseconds to hours: a straightforward conversion

Given a start date, time and end date, time, I am trying to calculate the total travel duration. The output is in milliseconds and needs to be converted into hours format. Despite attempting some solutions shared here, I haven't been successful.

<md-cell *mdCellDef="let row"> {{row?.duration | formatDuration}} </md-cell>

Here is the related ts file:

  export class StoppageComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
  }


      filter('formatDuration', function () {
        return function (input) {
            var totalHours, totalMinutes, totalSeconds, hours, minutes, seconds, result='';

            totalSeconds = input / 1000;
            totalMinutes = totalSeconds / 60;
            totalHours = totalMinutes / 60;

            seconds = Math.floor(totalSeconds) % 60;
            minutes = Math.floor(totalMinutes) % 60;
            hours = Math.floor(totalHours) % 60;

            if (hours !== 0) {
                result += hours+':';

                if (minutes.toString().length == 1) {
                    minutes = '0'+minutes;
                }
            }

            result += minutes+':';

            if (seconds.toString().length == 1) {
                seconds = '0'+seconds;
            }

            result += seconds;

            return result;
        };
      });
    }

I suspect that the issue lies within the ts file code since I am relatively new to Angular.

Is there a way to directly convert this using a pipe without relying on functions?

javascript angular typescript

Answer 1

Answer №1

After reviewing other answers and finding them to be quite complicated, I managed to come up with a solution on my own.

Here is the HTML code:

<md-cell *mdCellDef="let row"> {{getFormathours(row?.duration)}} </md-cell>

And here is the TypeScript code:

getFormathours(input) {
    var totalHours, totalMinutes, totalSeconds, hours, minutes, seconds, result='';
    totalSeconds = input / 1000;
    totalMinutes = totalSeconds / 60;
    totalHours = totalMinutes / 60;

    seconds = Math.floor(totalSeconds) % 60;
    minutes = Math.floor(totalMinutes) % 60;
    hours = Math.floor(totalHours) % 60;

    console.log (hours + ' : '  + minutes + ' : ' + seconds);
    if (hours !== 0) {
        result += hours+' hr:';

        if (minutes.toString().length == 1) {
            minutes = '0'+minutes;
        }
    }

    result += minutes+' min';

      if (seconds.toString().length == 1) {
          seconds = '0'+seconds;
      }

      result += seconds;

    return result;
}

This solution provides exactly what I needed and offers a clearer explanation tailored to my question. I would like to thank those who provided other answers for their effort as well.

Answer 2

After reviewing other answers and finding them to be quite complicated, I managed to come up with a solution on my own.

Here is the HTML code:

<md-cell *mdCellDef="let row"> {{getFormathours(row?.duration)}} </md-cell>

And here is the TypeScript code:

getFormathours(input) {
    var totalHours, totalMinutes, totalSeconds, hours, minutes, seconds, result='';
    totalSeconds = input / 1000;
    totalMinutes = totalSeconds / 60;
    totalHours = totalMinutes / 60;

    seconds = Math.floor(totalSeconds) % 60;
    minutes = Math.floor(totalMinutes) % 60;
    hours = Math.floor(totalHours) % 60;

    console.log (hours + ' : '  + minutes + ' : ' + seconds);
    if (hours !== 0) {
        result += hours+' hr:';

        if (minutes.toString().length == 1) {
            minutes = '0'+minutes;
        }
    }

    result += minutes+' min';

      if (seconds.toString().length == 1) {
          seconds = '0'+seconds;
      }

      result += seconds;

    return result;
}

This solution provides exactly what I needed and offers a clearer explanation tailored to my question. I would like to thank those who provided other answers for their effort as well.

Answer 3

Answer №2

Don't waste time trying to come up with something new. Utilize Date objects for calculating duration.

If you have two date objects as inputs,

Calculate the difference between them in milliseconds, which is already done.
Create a new date object and remove the time value from it.
Assign the time difference to this new date object to extract the necessary values. Simply invoke the function to display the values in your desired format.

function getTravelTime(date1, date2) {
  var diff = +date2 - +date1;
  var today = new Date();
  today.setHours(0,0,0,0);
  var arrival = new Date(+today + diff);
  var duration = ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'].reduce(function(p,c,i,a){
    var value = arrival[c]() - today[c]();
    if(value) {
      p += value;
      p += ((c === 'getFullYear') ? ' Year' : c.replace('get', ' ')) + ' '
    }
    return p;
  }, '');
  console.log(duration);
}

function doubleDigits(str){
  return ('00' + str).slice(-2)
}

getTravelTime(new Date(2017, 10, 5, 5), new Date(2017, 10, 5, 15, 23));
getTravelTime(new Date(2017, 10, 5, 5), new Date(2017, 10, 6, 15, 23, 30));

Answer 4

Don't waste time trying to come up with something new. Utilize Date objects for calculating duration.

If you have two date objects as inputs,

Calculate the difference between them in milliseconds, which is already done.
Create a new date object and remove the time value from it.
Assign the time difference to this new date object to extract the necessary values. Simply invoke the function to display the values in your desired format.

function getTravelTime(date1, date2) {
  var diff = +date2 - +date1;
  var today = new Date();
  today.setHours(0,0,0,0);
  var arrival = new Date(+today + diff);
  var duration = ['getFullYear', 'getMonth', 'getDate', 'getHours', 'getMinutes', 'getSeconds'].reduce(function(p,c,i,a){
    var value = arrival[c]() - today[c]();
    if(value) {
      p += value;
      p += ((c === 'getFullYear') ? ' Year' : c.replace('get', ' ')) + ' '
    }
    return p;
  }, '');
  console.log(duration);
}

function doubleDigits(str){
  return ('00' + str).slice(-2)
}

getTravelTime(new Date(2017, 10, 5, 5), new Date(2017, 10, 5, 15, 23));
getTravelTime(new Date(2017, 10, 5, 5), new Date(2017, 10, 6, 15, 23, 30));

Answer 5

Answer №3

To ensure accuracy and avoid errors, I recommend utilizing the moment library instead of Date. You can find more information at https://momentjs.com/docs/

var t1 = moment('2017/10/5 15:23');
var t2 = moment('2017/10/5 15:23');

var differenceMinutes = t1.diff(t2, 'minutes');
var differenceMilliseconds = t1.diff(t2, 'minutes');

Opting for well-known and reliable libraries can improve efficiency. For Angular templates, you can use:

https://github.com/urish/angular2-moment

Here's an example:

{{startDate | amDifference: endDate :'' }}

Answer 6

To ensure accuracy and avoid errors, I recommend utilizing the moment library instead of Date. You can find more information at https://momentjs.com/docs/

var t1 = moment('2017/10/5 15:23');
var t2 = moment('2017/10/5 15:23');

var differenceMinutes = t1.diff(t2, 'minutes');
var differenceMilliseconds = t1.diff(t2, 'minutes');

Opting for well-known and reliable libraries can improve efficiency. For Angular templates, you can use:

https://github.com/urish/angular2-moment

Here's an example:

{{startDate | amDifference: endDate :'' }}

Answer 7

Answer №4

Feel free to utilize this code as is

export class StoppageComponent implements OnInit {

constructor() {
 }

ngOnInit() {
}


filter('formatDuration', function () {
    return function (input) {
        var result = new Date(input);
var n = (d.getDate().toString()) +'/'+ (d.getMonth().toString())+'/' +(d.getFullYear().toString()) + '  '+ (d.getHours().toString()) +':'+ (d.getHours().toString()) +':'+ (d.getSeconds().toString());

        return result;
    };
  });
}

Answer 8

Feel free to utilize this code as is

export class StoppageComponent implements OnInit {

constructor() {
 }

ngOnInit() {
}


filter('formatDuration', function () {
    return function (input) {
        var result = new Date(input);
var n = (d.getDate().toString()) +'/'+ (d.getMonth().toString())+'/' +(d.getFullYear().toString()) + '  '+ (d.getHours().toString()) +':'+ (d.getHours().toString()) +':'+ (d.getSeconds().toString());

        return result;
    };
  });
}

From milliseconds to hours: a straightforward conversion

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Step-by-step guide on how to change the appearance of a <DIV> using data from a database (JSON

Identify modifications in the input and at the same time update another input

Open $_POST in a new tab that has been edited for your convenience

Revamp your outdated components with 15 modern Angular Material styles

Teaching you how to incorporate empty spaces and punctuation within JOI

What is the method for assigning 'selective-input' to a form field in Angular?

Unable to modify the value of a key within an object using TypeScript

Just systems that have been positively identified

Event handling in Angular when the window is resized

Use ng-click to enable specific actions only on the element in which it is placed

Synchronizing timers among different elements

Developing a personalized validation function using Typescript for the expressValidator class - parameter is assumed to have a type of 'any'

Tips on incorporating a hyperlink into an object imported through GLTF loader

Encountering an unknown error with lite server when running npm start

Executing a SQL query using a JavaScript variable as a parameter

Tips for retrieving a flag when there is a preexisting record within an association in Sequelize

deleting a aircraft upon the addition of another in three.js

The Angular test spy is failing to be invoked

How can I optimize my .find query for a MongoDB GET request to achieve maximum performance?

Creating a corner ribbon for a Material UI Card: A step-by-step guide