我想以人性化的格式显示相对于当前日期的一些日期。
人性化相对日期的例子:
基本上忠实地保持最高的数量级(并且优先考虑,只有当通过其中2个单位时才调高单位 - 5周而不是1个月)。
虽然我可以住一个控制较少的图书馆,甚至更友好的日期,如:
任何流行的图书馆?
自从我写这个答案以来,一个着名的图书馆就是moment.js。
有libraries available,但自己实现它是微不足道的。只需使用一些条件。
假设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';
}
您需要对此进行调整以处理未来的日期。
我写了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个月”),但是记录了哪些字符串用于什么时间范围。
sugar.js具有很棒的日期格式功能。
不仅如此,它还提供了易于使用的常用功能,如字符串格式化,数字格式化等。
这是来自John Resig - http://ejohn.org/blog/javascript-pretty-date/的东西
编辑(2014年6月27日):继续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;
}
这个js脚本非常好用。您所要做的就是执行它。所有<time>
标签将更改为相对日期并每隔几分钟更新一次,因此相对时间将始终是最新的。
这里是糖与时刻的一个例子:对于显示周数的日历,我需要最后一个星期一值:
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
我更喜欢糖,经过几个月的时间后,我现在转向糖.js。它更清晰,与Javascripts的Date类很好地集成。
两个lib都涵盖OP案例,对于sugar.js,请参阅http://sugarjs.com/dates
听起来你可以使用http://www.datejs.com/
他们在主页面上有一个例子,它正是你所描述的!
编辑:实际上,我认为我在脑海中扭转了你的问题。在任何情况下,我认为你可以检查它,因为它是一个非常好的图书馆!
编辑x2:我要回应其他人所说的http://momentjs.com/可能是现在最好的选择。
编辑x3:我在一年多的时间里没有使用过date.js.我只使用momentjs来满足我所有与约会相关的需求。