用于人类友好的相对日期格式的Javascript库[关闭]


94

我想以一种人类友好的格式显示一些相对于当前日期的日期。

人类友好的相对日期的示例:

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

基本上忠实地保留最高数量级(最好,只有通过其中两个单位时才向上移动单位-5周而不是1个月)。

尽管我可以住在一个控制较少,日期更友好的图书馆,例如:

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

有什么流行的图书馆吗?


为什么“一日前”比仅仅显示实际日期和时间更“人性化”?
RobG 2012年

5
@RobG我想说的更多是避免切换上下文,例如在一个主要是文本和被阅读的页面中,将上下文切换到例如mm / dd / yy会导致暂停。在数据表中,使用该格式可能更具可读性。它也取决于读者对日期的处理方式,例如“这件事发生在n天前”或“这件事发生在1972年1月1日之前”是否适用于读者的情况。
2013年

也许,但是看到事件列表为“昨天... 3天前... 10 /五月...”令人困惑。我仍然需要将它们全部转换成我脑海中的日期,以获取它们发生的时间的图片。日期简洁明了,“时间之前”的值是会话性的,缺乏准确性,通常仅对关联的日期有用。也许那只是我,但也许不是。:-)
RobG

6
我会说这取决于上下文。毕竟,如果实际上是昨天,您不会说“我在2014年2月17日去钓鱼”。那里有更多的大脑停顿。这种文本非常适合最近发生的事件。
西蒙·威廉姆斯

2
@RobG只有像我们这样的书呆子才不会那样认为普通人。

Answers:


92

自从我写了这个答案以来,一个众所周知的库就是moment.js


可用,但是自己实现它很简单。只需使用一些条件。

假设dateDate您要与之进行比较的时间的实例化对象。

// 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';
}

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


9
昨天是最后一个午夜之前,而不是24小时至48小时之前。
mxcl 2012年

@mmaclaurin Mine绝不是一个完整的解决方案,只是一个正确方向的指针。我将做笔记以供日后更新,或者,如果需要,可以随时编辑答案。
alex 2012年

也请看看date-fns!如果您想保持代码量少,那么这是一个很棒的库,因为它的占地面积远小于momentjs!
mesqueeb

1
我更改了这段代码,以制作一个Twitter风格的getTimeAgo函数gist.github.com/pomber/6195066a9258d1fb93bb59c206345b38
pomber

85

我写了moment.js,它是一个执行此操作的日期库。它约为5KB(2011) 52KB(2019),可在浏览器和Node中使用。它也可能是最流行和最著名的JavaScript日期库。

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

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

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个月”),但是记录了在什么时间范围内使用哪些字符串。


1
使它在浏览器和节点中起作用的荣誉!
2013年

48
哈那个尺寸虽然更新!
Askdesigners

1
也请看看date-fns!如果您想保持代码量少,那么这是一个很棒的库,因为它的占地面积远小于momentjs!
mesqueeb

不如这个库,答案不包括使用它如何格式化在人类友好的方式了一些解释
典语

16

这是John Resig的内容-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;
}

1
嗨,弗洛伊德,我已经为您的答案添加了一些更改(错误修复,改进)。希望你不介意..
法伊兹

好一个!但不要使用时间戳记数字类型,可能需要更好的过滤器,如if(typeof time =='string'){time = time.replace(/-/ g,“ /").replace(/[TZ]/ G, ” ”)); }
ArthurAraújo16年

15

sugar.js具有出色的日期格式化功能。

不仅如此,它还提供了通用的通用功能,例如字符串格式,数字格式等,使用方便。


1
同意,sugar.js在这里值得更多关注。
citykid 2012年

5

这是糖与力矩的示例:对于显示星期的日历,我需要最后一个星期一的值:

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。它更清晰,并且与Javascript的Date类很好地集成在一起。

OP案例都包含在两个库中,sugar.js参见http://sugarjs.com/dates


4

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

http://timeago.yarp.com/


1
我认为这是最好的解决方案。该库非常积极地维护,它基于Resig的代码/受其启发,它非常小,具有大量的本地化内容,集成起来很简单。
约翰·巴希尔

4

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

他们在主页上有一个完全符合您描述的示例!

编辑:实际上,我想我在脑海中颠倒了您的问题。无论如何,我认为您可以签出它,因为它确实是一个很棒的图书馆!

编辑x2:我将回应其他人所说的http://momentjs.com/可能是目前可用的最佳选择。

编辑x3:我已经一年多没有使用date.js了。我专门使用momentjs来满足与日期有关的所有需求。


不错的lib建议。国际化绝对是加号。
斯蒂芬,

Date.js也是我的第一个想法,但是我看不到任何从数字到格式的格式-尽管它可能隐藏在文档中的某个地方。
风铃草

已知Date.js有严重的错误,在生产环境中不能被信任。许多框架都从Date.js切换到Moment.js
John Zabroski

我了解了datejs在Linux上不起作用的困难方式:(
fat fantasma 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.