用于人类友好的相对数据格式化的 Javascript 库

我希望以人性化的格式显示一些与当前日期相关的日期。

Examples of human-friendly relative dates:

  • 10秒前
  • 20分钟后
  • 一天前
  • 五周前
  • 两个月前

基本上忠实地保留了最高的数量级(并且根据个人喜好，只有当超过2个单位时才会提升单位——5周而不是1个月)。

虽然我可以住在一个没有那么多控制的图书馆里，甚至还有更友好的约会，比如:

  • 昨天
  • 明天
  • 上周
  • 几分钟前
  • in a couple hours

有这方面的流行图书馆吗？

80986 次浏览
小开
最佳答案

Since I wrote this answer, a well known library available is 等一下 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';
}

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

小开

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

他们在主页上有一个例子，完全符合你所描述的！

EDIT: Actually, I think I reversed your question in my head. In any case, I think you could check it out as it's a really great library anyway!

编辑 x2: 我将重复其他人所说的，http://momentjs.com/可能是目前最好的选择。

编辑 x3: 我已经有一年多没有使用 date.js 了，我只使用 Momentjs 来满足我所有与约会相关的需求。

小开

这是 John Resig-http://ejohn.org/blog/javascript-pretty-date/的资料

编辑(2014年6月27日) : 跟进来自 Sumurai8的评论-虽然链接页面仍然工作，这里是从上面的文章链接到 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;
}
小开

我编写了 瞬间，这是一个日期库。它大约是 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>

The timeago strings are customizable with moment.updateLocale(), so you can change them how you see fit.

The cutoffs are not what the question requests ("5 weeks" vs. "1 month"), but it is documented as to which strings are used for what time range.

小开

Js 具有很好的日期格式化功能。

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

小开

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

Http://timeago.yarp.com/

小开

这里有一个关于糖和时刻的例子: 对于一个显示周的日历，我需要最后一个星期一的值:

等一下 JS

Https://momentjs.com/

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

Sugar Js

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

我更喜欢糖，几个月后，现在我改吃糖了。它更加清晰，并且与 Javascript 的 Date 类很好地集成。

OP 的情况都包括在两个库中，对于 Sugar. js，请参阅 http://sugarjs.com/dates


提交答案