用于人性化相对日期格式的Javascript库


Javascript library for human-friendly relative date formatting

我想以人性化的格式显示相对于当前日期的一些日期。

人性化相对日期的例子：

  • 10秒前
  • 从现在起20分钟
  • 1天前
  • 5周前
  • 2个月前

基本上忠实地保持最高的数量级(并且优先考虑，只有当通过其中2个单位时才转移单位 - 5周而不是1个月)。

虽然我可以住一个控制较少的图书馆，甚至更友好的日期，如：

  • 昨天
  • 明天
  • 上个星期
  • 几分钟前
  • 在几个小时内

任何流行的图书馆？

相关讨论

自从我写这个答案以来，一个众所周知的图书馆就是moment.js。

有可用的库，但自己实现它是微不足道的。只需使用一些条件。

假设date是您想要进行比较的实例化date对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 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';
}

您需要对此进行调整以处理未来的日期。

相关讨论

我写了一个moment.js，一个执行此操作的日期库。关于 5KB(2011) 52KB(2019)，在浏览器以及Node中工作。它也可能是最流行和最着名的JavaScript日期库。

它支持timeago，格式化，解析，查询，操作，i18n等。

过去日期的Timeago(相对时间)用moment().fromNow()完成。例如，要以timeago格式显示2019年1月1日：

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

timeago字符串可以使用moment.updateLocale()进行自定义，因此您可以根据需要更改它们。

截止值不是问题所要求的("5周"与"1个月")，但是记录了哪些字符串用于什么时间范围。

相关讨论

sugar.js具有很棒的日期格式化功能。

不仅如此，它还提供了易于使用的常用功能，如字符串格式化，数字格式化等。

相关讨论

这是来自John Resig的东西 - http://ejohn.org/blog/javascript-pretty-date/

编辑(2014年6月27日)：跟进Sumurai8的评论 - 虽然链接页面仍然有效，但以下是上述文章中链接到pretty.js的摘录：

pretty.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
 * 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);
    });
};

用法：

1
2
3
4
5
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

关于用法的文章摘录：

Example Usage

In the following examples I make all the anchors on the site, that
have a title with a date in it, have a pretty date as their inner
text. Additionally, I continue to update the links every 5 seconds
after the page has loaded.

使用JavaScript：

1
2
3
4
5
6
7
8
9
10
11
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：

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

Faiz：对原始代码，错误修复和改进进行了一些更改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;
}
相关讨论

这里是糖与时刻的一个例子：对于显示周数的日历，我需要最后一个星期一值：

moment.js

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

sugar.js

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

我更喜欢糖，经过几个月的时间后，我现在转向糖.js。它更清晰，与Javascripts的Date类很好地集成。

两个lib都涵盖OP案例，对于sugar.js，请参阅http://sugarjs.com/dates

这个js脚本非常好用。您所要做的就是执行它。所有标签将更改为相对日期并每隔几分钟更新一次，因此相对时间将始终保持最新。

http://timeago.yarp.com/

相关讨论

听起来像你可以使用http://www.datejs.com/

他们在主页面上有一个例子，它正是你所描述的！

编辑：实际上，我认为我在脑海中扭转了你的问题。在任何情况下，我认为你可以检查它，因为它是一个非常好的图书馆！

编辑x2：我将回应其他人所说的http://momentjs.com/可能是现在最好的选择。

编辑x3：我在一年多的时间里没有使用过date.js.我只使用momentjs来满足我所有与约会相关的需求。

相关讨论