发表新帖
发表新帖

AngularJS - How do you convert milliseconds to xHours and yMins

前端 未结
关注
9 925
小鲜肉
小鲜肉 2020-12-14 18:26

I\'ve a requirement where I want to convert milliseconds to xHours and yMins in AngularJS.

For ex. 3600000 should be displayed as 1h 0m.

I tried using

相关标签:
9条回答
  • 梦谈多话
    2020-12-14 18:46

    Thanks. I've modified your filter slightly to return duration in hh:mm:ss format.

    .filter('duration', function() {
    //Returns duration from milliseconds in hh:mm:ss format.
      return function(millseconds) {
        var seconds = Math.floor(millseconds / 1000);
        var h = 3600;
        var m = 60;
        var hours = Math.floor(seconds/h);
        var minutes = Math.floor( (seconds % h)/m );
        var scnds = Math.floor( (seconds % m) );
        var timeString = '';
        if(scnds < 10) scnds = "0"+scnds;
        if(hours < 10) hours = "0"+hours;
        if(minutes < 10) minutes = "0"+minutes;
        timeString = hours +":"+ minutes +":"+scnds;
        return timeString;
    }
});
    0 讨论(0)
  • 孤独总比滥情好
    2020-12-14 18:47

    For anyone who wants to have comma separators (e.g. '21 days, 14 hours, 7 minutes'):

    'use strict';

angular.module('contests').filter('duration', function () {
    return function(milliseconds) {
        var seconds = Math.floor(milliseconds / 1000);
        var days = Math.floor(seconds / 86400);
        var hours = Math.floor((seconds % 86400) / 3600);
        var minutes = Math.floor(((seconds % 86400) % 3600) / 60);
        var dateTimeDurationString = '';
        if ((days > 0) && (hours === 0 && minutes === 0)) dateTimeDurationString += (days > 1) ? (days + ' days ') : (days + ' day ');
        if ((days > 0) && (hours > 0 || minutes > 0)) dateTimeDurationString += (days > 1) ? (days + ' days, ') : (days + ' day, ');
        if ((hours > 0) && (minutes > 0)) dateTimeDurationString += (hours > 1) ? (hours + ' hours, ') : (hours + ' hour, ');
        if ((hours > 0) && (minutes === 0)) dateTimeDurationString += (hours > 1) ? (hours + ' hours ') : (hours + ' hour ');
        if (minutes > 0) dateTimeDurationString += (minutes > 1) ? (minutes + ' minutes ') : (minutes + ' minute ');
        return dateTimeDurationString;
    };
});
    0 讨论(0)
  • [愿得一人]
    2020-12-14 18:47

    Use below syntax

    $filter('date')(dateObj, format)

    e.g.

    $filter('date')(1324339200000, 'dd/MM/yyyy');
    0 讨论(0)
  • 感动是毒
    2020-12-14 18:49

    Let make a custom filter for this, e.g:

    .filter('millSecondsToTimeString', function() {
  return function(millseconds) {
    var oneSecond = 1000;
    var oneMinute = oneSecond * 60;
    var oneHour = oneMinute * 60;
    var oneDay = oneHour * 24;

    var seconds = Math.floor((millseconds % oneMinute) / oneSecond);
    var minutes = Math.floor((millseconds % oneHour) / oneMinute);
    var hours = Math.floor((millseconds % oneDay) / oneHour);
    var days = Math.floor(millseconds / oneDay);

    var timeString = '';
    if (days !== 0) {
        timeString += (days !== 1) ? (days + ' days ') : (days + ' day ');
    }
    if (hours !== 0) {
        timeString += (hours !== 1) ? (hours + ' hours ') : (hours + ' hour ');
    }
    if (minutes !== 0) {
        timeString += (minutes !== 1) ? (minutes + ' minutes ') : (minutes + ' minute ');
    }
    if (seconds !== 0 || millseconds < 1000) {
        timeString += (seconds !== 1) ? (seconds + ' seconds ') : (seconds + ' second ');
    }

    return timeString;
};
});

    Then use it:

    <div>{{ millSeconds | millSecondsToTimeString }}</div>
    0 讨论(0)
  • 终归单人心
    2020-12-14 18:52

    You'll want to use moment's duration objects.

    To do what you want, try this:

    app.controller 'MainCtrl', ($scope) ->
    $scope.name = 'World'
    $scope.milliseconds = 3600000
    $scope.duration = moment.duration($scope.milliseconds)

    And the markup

    <body ng-controller="MainCtrl">
  <p>Milliseconds: {{milliseconds}}</p>
  <p>Duration: {{duration.hours()}}h {{duration.minutes()}}m</p>
</body>

    plunkr: http://plnkr.co/edit/2HL75Tmr4CoAy5R9smkx

    0 讨论(0)
  • 星月不相逢
    2020-12-14 18:54 
    (function () {
    'use strict';

    angular
        .module('module_name')
        .filter('secondsToDateTime', secondsToDateTime);

    function secondsToDateTime() {
        return function(seconds) {
            return new Date(1970, 0, 1).setSeconds(seconds);
        };
    }
})();


<span>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</span>
    0 讨论(0)
 看不清?
提交回复
热议问题