moment.jsの期間にformat()を使用するにはどうすればよいですか?


211

durationオブジェクトでmoment.js formatメソッドを使用する方法はありますか?私はそれをドキュメントのどこにも見つけることができず、durationオブジェクトの属性であるとは思われません。

私は次のようなことができるようになりたいです:

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
デュレーションのフォーマットも楽しみです。countdownjsを見てみましょうが、twixは「スマート」なフォーマットのみを実行しているようであり、あまりカスタマイズされていません。
mpen 2013年

2
twixはスマートなフォーマットを行うために一生懸命働いていますが、関連するトークンまで、github.com / icambron / twix.js / wiki / Formattingのように、多くのフォーマットオプションがあります。免責事項:私はtwixの作者です。

3
Countdown.jsは優れており、作者は非常に役に立ちます(私がいくつかの提案をしたため、彼は同じ日に2つのバージョンをリリースしました)。
Ohad Schneider

5
この回答にリンクされているgithubの問題は、終わりのないストリームの意見、願望、怒りであり、4年経っても問題は解決されず、何の役にも立たない
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.SSSDDD年はどこにあるか)は1、必要なときに表示されます0。そのための簡単な修正はありますか?
Andrew Mao 14

1
簡単な方法はありません。私はこの jsfiddle.net/fhdd8/14を実行しました。これはおそらくあなたがしたことですが、現時点でこれを実行するものは何もないと思います
David Glass

49
10兆ミリ秒をmm:ssとして表示しても意味がありません
Pier-Luc Gendreau

28
これは24時間を過ぎても機能しません(つまり、117時間を表示したい場合)。そうでなければ素晴らしい解決策!
Phil

1
@Phil日を表示する場合は、「D」または「DD」を使用できます。
Vinay、2015

71

継続時間をミリ秒に、次に瞬間に変換します。

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

14
したがって、これが24時間より長い場合は機能しません
。24

4
@ S.Robijnsは有用な観察ですが、他の人のために強調するだけです-これの予想される動作です.format('HH:mm:ss')ドキュメントを見る
davnicwil

1
これが最良の答えです!
Magico

44

このプラグインのモーメント期間フォーマットを使用します。

例:

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

1
そのフォーマットが適切に機能しない場合は、持続時間側は良好ですが、指定hh:mm:mmして10秒しか表示しない場合1000:00:10(forcelengthがオンの場合でも)表示されません。標準化された。
Piotr Kula 2015

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は、期間が1日より長い場合は機能しませんが、ライブラリはそれを処理します
reggaeguitar

16

次のコード行を使用します。

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

8
継続時間が> 86400 ''(つまり24時間)を超える場合、これは機能しません。
Lorenzo Tassone

Excelでも同じですが、24時間後にロールオーバーされます。24時間の制限を認識している場合、これは優れた回避策です。
Eman4real

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

1
一般に、コードに意図されていること、および他の人を紹介することなく問題を解決する理由の説明が含まれている場合、回答ははるかに役立ちます。(おそらくこの投稿は少なくとも1人のユーザーによってフラグが立てられました。おそらく説明なしの回答は削除するべきだと考えていたためです。)
Nathan Tuggy

1
説明なしかどうか、これは私のために何をしたかです。ありがとう:)
dmmd

説明は必要ありません。Moment.jsドキュメントは、このソリューションがどのようにして達成されたかを示します。
coffekid 2017年

2
役に立たない。この質問に対する他のほとんどの回答と同様に、合計時間ではなく、時間の一部が返されます。たとえば、duration moment.duration({days:2、hours:12})に対して12:00を返します
ニュートリノ

1
moment.duration(diff).asMilliseconds()が過剰です。差分を使用できます。すでにミリ秒単位です。
kristopolous

12

私の特定のユースケースに最適なシナリオは次のとおりです。

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

プライベート内部プロパティ_dataにアクセスしないため、@ Wilsonの回答が改善されます。


ありがとう@TaeKwonJ​​oe
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未満の場合、先行ゼロは含まれません...
carpiediem

1時間よりも多くの秒がある場合はどうなりますか?60秒以上あることは問題ありませんか?
shaedrich

先行ゼロは機能しますが、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';-私はそれを正しく読んでいますか?
スティーブンポール

8

私が使う:

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

そして、私はvar strで「09:30」を取得します。


すごい!これはうまくいきます...一体どうやってこれを思いついたのですか:)
vanthome

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 2017

これは間違っています。DAYSを無視するだけでなく、1日と1時間は01:00と表示されます。さらに、タイムゾーンを完全に無視しています。これはより良い解決策ですが、完全なもので はありませんmoment.utc(...).format("HH:mm");
Gil Epshtain

5

差分が瞬間の場合

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

これは、タイムゾーンなどを考慮しても、信頼できるとは言えません。これを本番環境で使用しますか?
キース

質問にはタイムゾーンについての言及はありません。
キーラン

3
誰もがタイムゾーンに住んでいます。moment(0)は常にすべてのタイムゾーンで12:00 AMとして登録されますか?
キース

私は単に私が懐疑的であるため、あなたの答えのコードが機能するかどうかを尋ねています。私は多くのプログラミング言語で、日付を扱う多くのコードを書きました。私の経験に基づいて、あなたのコードは特定のタイムゾーンでのみ機能するようです–しかし、おそらくJavaScriptがUnixエポックの近くで日付をどのように表すかについて私が知らないことがあるので、私は尋ねています。
キース

1
2行目は、時間の始まり(1970年)からの瞬間を作成します。これはしません。
kumarharsh 2013年

5

別のJavaScriptライブラリを使用したい場合、numeric.jsは秒を次のようにフォーマットできます(例は1000秒)。

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

間違いなく行く方法。予想通り。
Piotr Kula 2015

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

1日以上処理するために、回答を再度更新しました。私のユースケースでは問題なく動作します。
ni-ko-o-kin

2
問題は、多くの場合、先頭のゼロが多すぎるため、ソリューションが理想的ではないことです。「00:00:00:00:01」を返したいのは誰ですか?私のソリューションは「スケーラブル」であり、必要なだけ先行ゼロを追加します。
shaedrich

完璧に動作します。非常にシンプルな出力。何の日がない場合は、日間零点は存在しませんなどを表示
ハサン斎場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 2018年

3

他のライブラリを含まず、24時間を超える差分で動作する私のソリューション

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

ネイティブJavaScriptはどうですか?

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

モーメント期間フォーマットを使用する

クライアントフレームワーク(例: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

これを使用して、最初の2文字を時間、最後の2文字を分として取得できます。同じロジックを秒に適用できます。

/**
     * 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

確実なこと!クイックテスト用のスニペットで更新されました。
ホセ・ルイス・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 am。

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

🎉まあ、あなたは上記のタイプエラーはありません。8正しい値は午前8時00分ですか?いいえ...、取得する値は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

場合totalMilliseconds894600000これが返され249:30:00ます。

お役に立てば幸いです。コメントに質問を残してください。;)


-1

Angular> 2を使用している場合、@ hai-alalufの回答に触発されてPipeを作成しました。

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.