web-dev-qa-db-ja.com

人に優しい相対的な日付の書式設定のためのJavascriptライブラリ

現在の日付を基準にして、いくつかの日付を人に優しい形式で表示したいと思います。

人に優しい相対日付の例：

  • 10秒前
  • 今から20分
  • 1日前
  • 5週間前
  • 2ヶ月前

基本的に最高の規模を忠実に保持します（優先的には、ユニットを2つ渡すと、1か月ではなく5週間だけシフトします）。

私は、以下のように管理が難しく、より親しみやすい日付のライブラリーと一緒に暮らすこともできましたが：

  • 昨日
  • 明日
  • 先週
  • 数分前に
  • 数時間で

これに人気のあるライブラリはありますか？

javascriptdateformattingrelative
88
rampion

この回答を書いたので、利用可能な有名なライブラリは moment.js です。

使用可能なライブラリ がありますが、自分で実装するのは簡単です。ほんの一握りの条件を使用してください。

dateは、比較対象の時間に対してインスタンス化されたDateオブジェクトであると想定します。

// Make a fuzzy time
var delta = Math.round((+new Date - date) / 1000);

var minute = 60,
    hour = minute * 60,
    day = hour * 24,
    week = day * 7;

var fuzzy;

if (delta < 30) {
    fuzzy = 'just then.';
} else if (delta < minute) {
    fuzzy = delta + ' seconds ago.';
} else if (delta < 2 * minute) {
    fuzzy = 'a minute ago.'
} else if (delta < hour) {
    fuzzy = Math.floor(delta / minute) + ' minutes ago.';
} else if (Math.floor(delta / hour) == 1) {
    fuzzy = '1 hour ago.'
} else if (delta < day) {
    fuzzy = Math.floor(delta / hour) + ' hours ago.';
} else if (delta < day * 2) {
    fuzzy = 'yesterday';
}

これを適応して、将来の日付を処理する必要があります。

84
alex

moment.js 、これを行う日付ライブラリを書きました。それは 5KB（2011） 52KB（2019）、ブラウザおよびNodeで動作します。また、おそらくJavaScriptで最も人気があり有名な日付ライブラリです。

Timeago、フォーマット、解析、クエリ、操作、国際化などをサポートします。

過去の日付のTimeago（相対時間）は moment().fromNow() で行われます。たとえば、2019年1月1日をtimeago形式で表示するには：

_let date = moment("2019-01-01", "YYYY-MM-DD");
console.log(date.fromNow());_
_<script src="https://momentjs.com/downloads/moment.min.js"></script>_

Timeago文字列は moment.updateLocale() でカスタマイズできるため、適切に表示されるように変更できます。

カットオフは質問が要求するもの（「5週間」と「1か月」）ではありませんが、どの文字列がどの時間範囲に使用されるかについて文書化されています。

78
timrwood

sugar.js には素晴らしい日付フォーマット機能があります。

それだけでなく、文字列の書式設定、数値の書式設定など、使いやすい一般的な汎用機能も提供します。

15
Hendy Irawan

ジョン・レジグの何か- http://ejohn.org/blog/javascript-pretty-date/

編集（6/27/2014）： Sumurai8 からのコメントのフォローアップ-リンクされたページは引き続き機能しますが、pretty.js上記の記事からのリンク：

pretty.js

/*
 * JavaScript Pretty Date
 * Copyright (c) 2011 John Resig (ejohn.org)
 * Licensed under the MIT and GPL licenses.
 */

// Takes an ISO time and returns a string representing how
// long ago the date represents.
function prettyDate(time) {
    var date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);

    if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31) return;

    return day_diff == 0 && (
    diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor(diff / 60) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor(diff / 3600) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago";
}

// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if (typeof jQuery != "undefined") jQuery.fn.prettyDate = function() {
    return this.each(function() {
        var date = prettyDate(this.title);
        if (date) jQuery(this).text(date);
    });
};

使用法：

prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
prettyDate("2007-12-15T22:24:17Z") // => undefined

使用に関する記事からの抜粋：

使用例

次の例では、日付を含むタイトルを持ち、内部テキストとしてきれいな日付を持つサイト上のすべてのアンカーを作成します。さらに、ページが読み込まれた後、5秒ごとにリンクを更新し続けます。

JavaScriptの場合：

function prettyLinks(){
    var links = document.getElementsByTagName("a");
    for ( var i = 0; i < links.length; i++ )
        if ( links[i].title ) {
            var date = prettyDate(links[i].title);
            if ( date )
                links[i].innerHTML = date;
        }
}
prettyLinks();
setInterval(prettyLinks, 5000);

jQueryの場合：

$("a").prettyDate();
setInterval(function(){ $("a").prettyDate(); }, 5000);

Faiz：元のコードにいくつかの変更を加え、バグを修正して改善しました。

function prettyDate(time) {
    var date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);
    var year = date.getFullYear(),
        month = date.getMonth()+1,
        day = date.getDate();

    if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31)
        return (
            year.toString()+'-'
            +((month<10) ? '0'+month.toString() : month.toString())+'-'
            +((day<10) ? '0'+day.toString() : day.toString())
        );

    var r =
    ( 
        (
            day_diff == 0 && 
            (
                (diff < 60 && "just now")
                || (diff < 120 && "1 minute ago")
                || (diff < 3600 && Math.floor(diff / 60) + " minutes ago")
                || (diff < 7200 && "1 hour ago")
                || (diff < 86400 && Math.floor(diff / 3600) + " hours ago")
            )
        )
        || (day_diff == 1 && "Yesterday")
        || (day_diff < 7 && day_diff + " days ago")
        || (day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago")
    );
    return r;
}
13
Hari Pachuveetil

このjsスクリプトは非常に優れています。実行するだけです。すべて <time>タグは相対日付に変更され、数分ごとに更新されるため、相対時間は常に最新になります。

http://timeago.yarp.com/

4
boreq

http://www.datejs.com/ を使用できるように聞こえます

彼らはあなたが説明していることを正確に行う例がメインページにあります！

編集：実際、頭の中であなたの質問を逆にしたと思います。いずれにせよ、それはとにかく本当に素晴らしいライブラリなので、あなたはそれをチェックアウトできると思います！

EDIT x2：他の人が言ったことをエコーし​​ます http://momentjs.com/ は、おそらく現在利用可能な最良の選択です。

EDIT x3：私は1年以上date.jsを使用していません。日付に関連するすべてのニーズに、momentjsのみを使用しています。

4
RoboKozo

ここに砂糖と瞬間の例：週を表示するカレンダーの場合、最後の月曜日の値が必要でした：

moment.js

var m = moment().subtract("days", 1).sod().day(1) // returns a "moment"

sugar.js

var d = Date.past("monday") // returns a js Date object

私は砂糖を好むので、moment.jsを使用して数か月後にはsugar.jsに切り替えます。より明確で、JavascriptsのDateクラスとうまく統合されます。

OPのケースは両方のライブラリでカバーされています。sugar.jsについては http://sugarjs.com/dates を参照してください

4
citykid