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

IT技术 javascript date formatting
2021-01-24 19:03:58

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

人性化的相对日期示例:

  • 10 秒前
  • 20 分钟后
  • 1天前
  • 5 周前
  • 2个月前

基本上忠实地保持最高数量级(并且优先选择,仅在超过其中 2 个单位时才转移单位 - 5 周而不是 1 个月)。

虽然我可以忍受一个控制更少、日期更友好的图书馆,比如:

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

任何流行的图书馆?

6个回答

由于我写了这个答案,一个众所周知的可用库是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';
}

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

昨天是在最后一个午夜之前,而不是在 24 小时到 48 小时之前。
2021-03-19 19:03:58
也请看看date-fns如果您想保持代码库很小,这是一个很棒的库,因为它的占用空间比 momentjs 小得多!
2021-03-25 19:03:58
你错过了周案。
2021-03-28 19:03:58
@mmaclaurin 我的从来就不是一个完整的解决方案,只是一个指向正确方向的指针。我会做笔记以稍后更新,或者如果您愿意,请随时编辑答案。
2021-03-31 19:03:58
我更改了此代码以创建 twitter 风格的getTimeAgo函数gist.github.com/pomber/6195066a9258d1fb93bb59c206345b38
2021-04-10 19:03:58

我写了moment.js,这是一个执行此操作的日期库。它大约5KB (2011) 52KB (2019),适用于浏览器和 Node.js。它也可能是最流行和最著名的 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 个月”),但它记录了哪些字符串用于什么时间范围。

感谢让它在浏览器和节点中工作!!!!
2021-03-16 19:03:58
也请看看date-fns如果您想保持代码库很小,这是一个很棒的库,因为它的占用空间比 momentjs 小得多!
2021-03-22 19:03:58
虽然有那个尺寸更新!
2021-04-04 19:03:58
您是否也打算使用“弃用”进行更新?momentjs.com/docs/#/-project-status
2021-04-07 19:03:58
与这个库一样好,答案不包括如何使用它以人性化的方式格式化数字的解释
2021-04-10 19:03:58

这是 John Resig 的一些内容 - http://ejohn.org/blog/javascript-pretty-date/

编辑(2014年 6月 27 日):跟进Sumurai8的评论- 尽管链接页面仍然有效,以下是pretty.js上述文章链接的摘录

漂亮的.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;
}
请问,如何计算未来的日期?好像2天后。
2021-03-23 19:03:58
好一个!但是不要使用时间戳数字类型,可能需要更好的过滤器,例如 if(typeof time == 'string') { time = time.replace(/-/g, "/").replace(/[TZ]/ G, ” ”)); }
2021-03-29 19:03:58
嗨,弗洛伊德,我为您的答案添加了一些更改(错误修复、改进)。希望你不要介意..
2021-04-02 19:03:58

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

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

同意,sugar.js 在这里值得更多关注。
2021-03-16 19:03:58

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

http://timeago.yarp.com/

我认为这是最好的解决方案。该库维护得非常积极,它基于/受 Resig 代码的启发,它非常小,它有大量的本地化,集成起来很简单。
2021-03-17 19:03:58
很容易集成+1
2021-04-05 19:03:58