moment.js 기간에 format ()을 어떻게 사용합니까?


211

지속 시간 객체에 moment.js format 메소드를 사용할 수있는 방법이 있습니까? 문서의 어느 곳에서도 찾을 수 없으며 지속 기간 객체의 속성으로 보이지 않습니다.

나는 다음과 같은 것을 할 수 있기를 원한다.

var diff = moment(end).unix() - moment(start).unix();
moment.duration(diff).format('hh:mm:ss')

또한 이러한 종류의 기능을 쉽게 수용 할 수있는 다른 라이브러리가 있으면 권장 사항에 관심이 있습니다.

감사!


5
moment.utc (duration.asMilliseconds ()). format ( 'hh : mm : ss'); -기간은 벡터입니다. 원점에 꼬리를 붙이면 날짜 형식을 사용하여 hh : mm : ss를 얻을 수 있습니다.
Paul Williams

moment.utc (moment.duration (23, 'seconds'). asMilliseconds ()). format ( 'hh : mm : ss') => "12:00:23"은 제대로 작동하지 않습니다.
goldenratio

아, 나는 문제를 발견했다 . 이전 예제에서 HH:mm:ss줄 것이다 00:00:23. 시간 부분에 잘못된 케이싱
황금 비율

답변:


55

우리는 moment.js의 지속 시간에 어떤 종류의 서식을 추가하려고합니다. 참조 https://github.com/timrwood/moment/issues/463를

도움이 될 수있는 몇 가지 다른 라이브러리는 http://countdownjs.org/https://github.com/icambron/twix.js입니다.


4
지속 시간 형식도 기대하고 있습니다. 지금 카운트 다운을 살펴 보지만 twix는 많은 사용자 정의가 아닌 "스마트"포맷 만하는 것 같습니다.
mpen

2
트윅스 스마트 서식을 수행하기 위해 노력하고 있지만, 그것은 서식 옵션이 포함 된 토큰 오른쪽으로 많이있다 : github.com/icambron/twix.js/wiki/Formatting를 . 면책 조항 : 저는 twix의 저자입니다.

3
Countdown.js는 훌륭하고 저자는 매우 유용합니다 ( 내가 제안한 내용으로 인해 같은 날 2 개의 버전 을 출시 했습니다)!
Ohad Schneider

5
임 다운 투표이 답변에 링크 된 GitHub의 문제는 끝없는 스트림 의견, 소원과 문제가 계속 사년 후 열려, 납 호언 장담, userful 아무것도 때문에
bmaggi

29
라이브러리의 다른 곳에서 사용되는 다른 .format과 동일 할 수없는 이유는 무엇입니까? 이것은 광기입니다. 5 년이 지났는데 아직 안 끝났나요? 정말?!
kristopolous

164
// set up
let start = moment("2018-05-16 12:00:00"); // some random moment in time (in ms)
let end = moment("2018-05-16 12:22:00"); // some random moment after start (in ms)
let diff = end.diff(start);

// execution
let f = moment.utc(diff).format("HH:mm:ss.SSS");
alert(f);

JSFiddle을보십시오


3
좋은 접근 방식. 요일도 표시하려는 경우 작동하지 않지만 원하는 경우 DDD HH:mm:ss.SSS( DDD연중 어디에 있습니까 ) 표시 1됩니다 0. 그것에 대한 빠른 수정?
Andrew Mao

1
쉬운 방법은 없습니다. 나는이 한 jsfiddle.net/fhdd8/14 당신이 무슨 짓을했는지 아마도,하지만 난 순간 상자의 아웃 않는 것도 있다고 생각하지 않습니다
데이비드 유리

49
그것은 어떤 의미가 mm로 10 천조 밀리 초 단위로 표시하지 않습니다 : SS를
부두 뤽 Gendreau

28
24 시간이 지나도 작동하지 않습니다 (예 : 117 시간을 표시하려는 경우). 그렇지 않으면 훌륭한 솔루션!
Phil

1
@ 필요한 날짜를 표시하려면 "D"또는 "DD"를 사용할 수 있습니다.
Vinay

71

지속 시간을 ms로 변환 한 다음 순간으로 변환하십시오.

moment.utc(duration.as('milliseconds')).format('HH:mm:ss')

14
따라서 시간이 24 시간보다 길면 작동하지 않습니다. 24 시간이 0 시간으로 재설정됩니다.
S. Robijns

4
@ S.Robijns 유용한 관찰하지만, 단지 다른 사람을 위해 강조 -이 의 예상되는 동작 .format('HH:mm:ss'). 문서보기
davnicwil

1
이것이 가장 좋은 답변입니다!
Magico

44

이 플러그인 Moment Duration 형식을 사용하십시오 .

예:

moment.duration(123, "minutes").format("h:mm");

1
해당 형식이 제대로 작동하지 않고 지속 시간 측면은 좋지만 내가 지정 hh:mm:mm하고 10 초 만 표시하면 10대신 00:00:10힘 길이가 설정되어 있음) 형식이 지정되지 않은 경우 ... 표준화.
Piotr Kula

9
@ppumkin 나는 이것이 오래된 것을 알고 있지만 지정 { trim: false }하면 그 행동을 멈출 것입니다.
Carlos Martinez

3
당신처럼, 시간이 가정이 내가 사용하는 것을 선호 무엇을 const duration = moment.duration(value, 'seconds');내가 사용하여 포맷 할 수있는 것보다 : moment.utc(duration.as('milliseconds')).format('HH:mm:ss').toString();
예브게니 Bobkin

1
@EvgenyBobkin 지속 시간이 하루보다 길면 작동하지 않습니다. 라이브러리는 처리하지만
reggaeguitar

16

이 코드 줄을 사용하십시오.

moment.utc(moment.duration(4500, "seconds").asMilliseconds()).format("HH:mm:ss")

8
지속 시간이 86400 인치 (예 : 24 시간) 이상이면 작동하지 않습니다.
Lorenzo Tassone

엑셀에서도 동일하며 24 시간에 롤오버됩니다. 24 시간 제한을 알고있는 경우이 방법을 사용하면 좋습니다.
Eman4real

15
var diff = moment(end).unix() - moment(start).unix();
moment.utc(moment.duration(diff).asMilliseconds()).format("HH:mm:ss.SSS");

1
일반적으로 코드의 목적과 다른 언어를 도입하지 않고 문제를 해결하는 이유에 대한 설명이 포함되어 있으면 답변이 훨씬 유용합니다. (이 게시물은 설명이없는 답변을 삭제해야한다고 생각했기 때문에 한 명 이상의 사용자가 신고했습니다.)
Nathan Tuggy

1
설명이 없든 없든, 이것이 나를 위해 한 일입니다. 감사합니다 :)
dmmd

설명이 필요하지 않습니다. Moment.js 문서는이 솔루션이 어떻게 달성되었는지 보여줄 수 있습니다.
coffekid

2
쓸모없는. 이 질문에 대한 대부분의 다른 답변과 마찬가지로 총 시간이 아닌 지속 시간의 부분 시간을 반환합니다. 예를 들어, moment.duration ({days : 2, hours : 12}) 동안 12:00을 반환합니다.
Neutrino

1
moment.duration (diff) .asMilliseconds ()가 과도합니다. diff를 사용할 수 있습니다. 이미 밀리 초입니다.
kristopolous

12

내 특정 사용 사례에 가장 적합한 시나리오는 다음과 같습니다.

var duration = moment.duration("09:30"),
    formatted = moment.utc(duration.asMilliseconds()).format("HH:mm");

이것은 개인 내부 속성 _data에 액세스하지 않기 때문에 @Wilson의 답변을 향상시킵니다.


@TaeKwonJoe
Kamlesh 님

11

.format이 필요하지 않습니다. 다음과 같은 기간을 사용하십시오.

const duration = moment.duration(83, 'seconds');
console.log(duration.minutes() + ':' +duration.seconds());
// output: 1:23

이 솔루션을 여기에서 찾았습니다 : https://github.com/moment/moment/issues/463

편집하다:

초, 분 및 시간 동안 패딩으로 :

const withPadding = (duration) => {
    if (duration.asDays() > 0) {
        return 'at least one day';
    } else {
        return [
            ('0' + duration.hours()).slice(-2),
            ('0' + duration.minutes()).slice(-2),
            ('0' + duration.seconds()).slice(-2),
        ].join(':')
    }
}

withPadding(moment.duration(83, 'seconds'))
// 00:01:23

withPadding(moment.duration(6048000, 'seconds'))
// at least one day

2
duration.seconds ()가 10보다 작 으면
앞에

1 시간보다 더 많은 시간이 있으면 어떻게됩니까? 60 초 이상 걸리는 게 괜찮습니까?
shaedrich

선행 0은 작동하지만 duration = moment.duration(7200, 'seconds'); withPadding(duration);"00:00"이라고 표시됩니다.
shaedrich

@shaedrich 시간을 포함하도록 답변을 다시 업데이트했습니다. 며칠, 몇 주, 아소도 필요하다면 배열에 추가 할 수도 있습니다
ni-ko-o-kin

1
if (duration.asDays() > 0) { return 'at least one day';-내가 올바르게 읽고 있습니까?
Stephen Paul

8

나는 사용한다:

var duration = moment.duration("09:30");
var str = moment(duration._data).format("HH:mm");

그리고 var str에서 "09:30"을 얻습니다.


큰! 이것은 단지 작동합니다 ... 어떻게 지구상에서 이것을
생각해 냈습니까

4
이 솔루션을 피하십시오 _data. 내부 속성이므로 경고없이 변경 될 수 있습니다.
Druska

1
불행히도 항상 예상대로 작동하지는 않습니다. moment(moment.duration(1200000)._data).format('hh:mm:ss')00:20 대신 12:20을 반환합니다
Anna R

2
@AnnaR의 h범위는 1-12이므로 다소 기대할 수 있습니다. 사용 H하는 대신 시간 토큰 - 문서를
barbsan

DAYS를 무시할뿐만 아니라 1 일과 1 시간은 01:00로 표시됩니다. 또한 완전히 시간대, 더 나은 솔루션을 무시되지만, 완전한되지도 있을 것 하나 moment.utc(...).format("HH:mm");
길 Epshtain

5

diff가 순간이라면

var diff = moment(20111031) - moment(20111010);
var formated1 = moment(diff).format("hh:mm:ss");
console.log("format 1: "+formated1);

시간대 등에서는 신뢰할 수없는 것 같습니다. 프로덕션에서 이것을 사용합니까?
Keith

질문에는 시간대에 대한 언급이 없습니다.
Kieran

3
모든 사람은 시간대에 살고 있습니다. 모든 시간대에서 moment (0)이 항상 12:00 AM으로 등록됩니까?
Keith

나는 회의 적이기 때문에 귀하의 답변에 코드가 작동하는지 묻습니다. 많은 프로그래밍 언어로 날짜와 함께 작동하는 많은 코드를 작성했습니다. 내 경험에 따르면 코드는 특정 시간대에서만 작동하는 것 같습니다. 그러나 Javascript가 Unix 시대 근처에서 날짜를 나타내는 방법에 대해 알 수없는 것이 있기 때문에 묻습니다.
Keith

1
두 번째 줄은 시작 시간 (1970)부터 순간을 만듭니다. 그렇지 않습니다.
kumarharsh

5

다른 자바 스크립트 라이브러리를 사용하려는 경우 numeric.js 는 다음과 같이 초를 형식화 할 수 있습니다 (예 : 1000 초).

var string = numeral(1000).format('00:00');
// '00:16:40'

확실히 갈 길입니다. 예상대로.
Piotr Kula

4

이 경우 클래식 형식 함수를 사용합니다.

var diff = moment(end).unix() - moment(start).unix();

//use unix function instead of difference
moment.unix(diff).format('hh:mm:ss')

시간 차이가 표준 순간 날짜, 초기 에포크 날짜 시간으로 취급되기 때문에 이것은 해킹이지만, 우리 목표에 중요하지 않으며 플러그인이 필요하지 않습니다.


4

모든 시간을 표시해야하고 (24 시간 이상) 시간 전 '0'이 필요하지 않은 경우 짧은 코드 행으로 서식을 지정할 수 있습니다.

Math.floor(duration.as('h')) + moment.utc(duration.as('ms')).format(':mm:ss')

4

ni-ko-o-kin의 답변을 바탕으로 :

meassurements = ["years", "months", "weeks", "days", "hours", "minutes", "seconds"];
withPadding = (duration) => {
    var step = null;
    return meassurements.map((m) => duration[m]()).filter((n,i,a) => {
        var nonEmpty = Boolean(n);
        if (nonEmpty || step || i >= a.length - 2) {
            step = true;
        }
        return step;
    }).map((n) => ('0' + n).slice(-2)).join(':')
}

duration1 = moment.duration(1, 'seconds');
duration2 = moment.duration(7200, 'seconds');
duration3 = moment.duration(604800, 'seconds');

withPadding(duration1); // 00:01
withPadding(duration2); // 02:00:00
withPadding(duration3); // 01:07:00:00:00

나는 그것이 매우 읽기 쉽다고 생각하지 않습니다. 여기서 어떤 문제를 해결하고 싶습니까? 사용 사례는 무엇입니까?
ni-ko-o-kin

하루 이상을 처리하기 위해 답변을 다시 업데이트했습니다. 내 유스 케이스에 잘 작동합니다.
ni-ko-o-kin

2
문제는 대부분의 경우 솔루션에 선행 제로가 너무 많기 때문에 이상적이지 않다는 것입니다. "00 : 00 : 00 : 00 : 01"을 반환하려는 사람은 누구입니까? 내 솔루션은 "확장 가능"하며 필요한만큼 선행 0을 추가합니다.
shaedrich

완벽하게 작동합니다. 매우 간단한 출력. 일이 없으면 표시되는 일에 대해 0이 없습니다.
Hasan Sefa Ozalp

3

모멘트 지속 시간을 문자열로 포맷하려면

var duration = moment.duration(86400000); //value in milliseconds
var hours = duration.hours();
var minutes = duration.minutes();
var seconds = duration.seconds();
var milliseconds = duration.milliseconds();

var date = moment().hours(hours).minutes(minutes).seconds(seconds).millisecond(milliseconds);
if (is12hr){
    return date.format("hh:mm:ss a");
}else{
    return date.format("HH:mm:ss");
}

3

각도를 사용하는 경우 이것을 필터에 추가하십시오.

.filter('durationFormat', function () {
    return function (value) {
        var days = Math.floor(value/86400000);
        value = value%86400000;
        var hours = Math.floor(value/3600000);
        value = value%3600000;
        var minutes = Math.floor(value/60000);
        value = value%60000;
        var seconds = Math.floor(value/1000);
        return (days? days + ' days ': '') + (hours? hours + ' hours ': '') + (minutes? minutes + ' minutes ': '') + (seconds? seconds + ' seconds ': '')
    }
})

사용 예

<div> {{diff | durationFormat}} </div>

정말 좋습니다. 나는 이와 같은 '예쁜 형식'을 찾고있었습니다. 감사!
riketscience

3

다른 라이브러리와 관련이 없으며 diff> 24h와 작동하는 내 솔루션

var momentInSeconds = moment.duration(n,'seconds')
console.log(("0" + Math.floor(momentInSeconds.asHours())).slice(-2) + ':' + ("0" + momentInSeconds.minutes()).slice(-2) + ':' + ("0" + momentInSeconds.seconds()).slice(-2))

1

네이티브 자바 스크립트는 어떻습니까?

var formatTime = function(integer) {
    if(integer < 10) {
        return "0" + integer; 
    } else {
        return integer;
    }
}

function getDuration(ms) {
    var s1 = Math.floor(ms/1000);
    var s2 = s1%60;
    var m1 = Math.floor(s1/60);
    var m2 = m1%60;
    var h1 = Math.floor(m1/60);
    var string = formatTime(h1) +":" + formatTime(m2) + ":" + formatTime(s2);
    return string;
}

1

moment-duration-format을 사용하십시오 .

클라이언트 프레임 워크 (예 : React)

import moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
momentDurationFormatSetup(moment);

const breakLengthInMinutes = moment.duration(breakLengthInSeconds, 's').format('m');

서버 (node.js)

const moment = require("moment-timezone");
const momentDurationFormatSetup = require("moment-duration-format");

momentDurationFormatSetup(moment);

const breakLengthInMinutes = moment.duration(breakLengthInSeconds, 's').format('m');

0
const duration = moment.duration(62, 'hours');
const n = 24 * 60 * 60 * 1000;
const days = Math.floor(duration / n);
const str = moment.utc(duration % n).format('H [h] mm [min] ss [s]');
console.log(`${days > 0 ? `${days} ${days == 1 ? 'day' : 'days'} ` : ''}${str}`);

인쇄물:

2 일 14 시간 00 분 00 초


0
import * as moment from 'moment'
var sleep = require('sleep-promise');

(async function () {
    var t1 = new Date().getTime();
    await sleep(1000); 
    var t2 = new Date().getTime();
    var dur = moment.duration(t2-t1); 
    console.log(`${dur.hours()}h:${dur.minutes()}m:${dur.seconds()}s`);
})();
0h:0m:1s

0

numeric.js 를 사용하여 지속 시간을 형식화 할 수 있습니다 .

numeral(your_duration.asSeconds()).format('00:00:00') // result: hh:mm:ss

0

처음 두 문자를 시간으로, 마지막 두 문자를 분으로 가져 오는 데 사용할 수 있습니다. 동일한 논리가 초에 적용될 수 있습니다.

/**
     * PT1H30M -> 0130
     * @param {ISO String} isoString
     * @return {string} absolute 4 digit number HH:mm
     */

    const parseIsoToAbsolute = (isoString) => {
    
      const durations = moment.duration(isoString).as('seconds');
      const momentInSeconds = moment.duration(durations, 'seconds');
    
      let hours = momentInSeconds.asHours().toString().length < 2
        ? momentInSeconds.asHours().toString().padStart(2, '0') : momentInSeconds.asHours().toString();
        
      if (!Number.isInteger(Number(hours))) hours = '0'+ Math.floor(hours);
    
      const minutes = momentInSeconds.minutes().toString().length < 2
        ? momentInSeconds.minutes().toString().padEnd(2, '0') : momentInSeconds.minutes().toString();
    
      const absolute = hours + minutes;
      return absolute;
    };
    
    console.log(parseIsoToAbsolute('PT1H30M'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


코드를 코드 조각으로 삽입하면 메소드를 테스트하고 일부 출력을 콘솔에 표시 할 수 있습니다.
DJDaveMark

확실한 것! 빠른 테스트를 위해 스 니펫으로 업데이트되었습니다.
José Luis Raffalli

0

moment.duration(x).format()더 이상 사용되지 않습니다. moment.utc(4366589).format("HH:mm:ss")원하는 응답을 얻는 데 사용할 수 있습니다 .

console.log(moment.utc(4366589).format("HH:mm:ss"))
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


0

moment.js 지속 시간을 올바르게 사용하는 방법? | 코드에서 moment.duration () 사용

먼저 가져와야 moment하고 moment-duration-format.

import moment from 'moment';
import 'moment-duration-format';

그런 다음 지속 시간 기능을 사용하십시오. 위의 예를 적용하자 : 28800 = 오전 8시.

moment.duration(28800, "seconds").format("h:mm a");

🎉 글쎄, 위의 유형 오류가 없습니다. 🤔 오전 8시 올바른 가치가 있습니까? 아닙니다… 귀하가 얻는 가치는 8:00입니다. 예상대로 Moment.js 형식이 작동하지 않습니다.

💡 해결 방법은 초를 밀리 초로 변환하고 UTC 시간을 사용하는 것입니다.

moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a')

자, 이제 오전 8시입니다. 정수 시간으로 오전 8시 대신 오전 8시를 원하면 RegExp을 수행해야합니다.

const time = moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a');
time.replace(/:00/g, '')

0

시간을이 형식으로 표시하기위한 요구 사항으로 작업하려면이 작업을 수행해야했습니다. 처음에 나는 이것을 시도했다.

moment.utc(totalMilliseconds).format("HH:mm:ss")

그러나 24 시간이 넘는 시간과 시간은 0으로 재설정되었습니다. 그러나 분과 초는 정확했습니다. 그래서 나는 분과 초 동안 그 부분만을 사용했습니다.

var minutesSeconds = moment.utc(totalMilliseconds).format("mm:ss")

이제 필요한 것은 총 시간입니다.

var hours = moment.duration(totalMilliseconds).asHours().toFixed()

그리고 우리 모두가 원하는 형식을 얻으려면 서로 붙입니다.

var formatted = hours + ":" + minutesSeconds

경우 totalMilliseconds이다 894600000이 반환됩니다 249:30:00.

도움이 되었기를 바랍니다. 의견에 질문을 남겨주세요. ;)


-1

Angular> 2를 사용하면 @ hai-alaluf 답변에서 영감을 얻은 파이프를 만들었습니다.

import {Pipe, PipeTransform} from "@angular/core";

@Pipe({
  name: "duration",
})

export class DurationPipe implements PipeTransform {

  public transform(value: any, args?: any): any {

    // secs to ms
    value = value * 1000;
    const days = Math.floor(value / 86400000);
    value = value % 86400000;
    const hours = Math.floor(value / 3600000);
    value = value % 3600000;
    const minutes = Math.floor(value / 60000);
    value = value % 60000;
    const seconds = Math.floor(value / 1000);
    return (days ? days + " days " : "") +
      (hours ? hours + " hours " : "") +
      (minutes ? minutes + " minutes " : "") +
      (seconds ? seconds + " seconds " : "") +
      (!days && !hours && !minutes && !seconds ? 0 : "");
  }
}

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.