人性化的相对date格式的Javascript库
我希望以人性化的格式显示一些相对于当前date的date。
人性化的相对date的例子:
- 10秒前
- 20分钟后
- 1天前
- 5周前
- 2个月前
基本上忠实地保持最高的数量级(并且优选地,当通过这些单位中的2个时,仅仅移动单位 – 5个星期而不是1个月)。
虽然我可以住在一个控制力较差,日子更友好的图书馆里,例如:
- 昨天
- 明天
- 上个星期
- 几分钟前
- 在几个小时内
任何stream行的图书馆呢?
由于我写了这个答案,一个众所周知的图书馆是moment.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'; }
你将需要适应这个来处理未来的date。
我写了一个小date库来做到这一点。 这大约是2K 136K(最小化了46K),可以在浏览器和Node中使用。
moment.js
它支持timeago,格式化,parsing,操作,i18n等。
此外,timeagostring是可定制的,所以你可以改变他们如何看待适合。
截止date并不像你想要的那样(5周vs 1个月),但是它们logging了在什么时间范围内使用哪些string。
sugar.js有很好的date格式化function。
不仅如此,它还提供了常用的通用function,如string格式化,数字格式化等,使用方便。
这里有一些来自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
摘自文章使用方法:
用法示例
在下面的例子中,我使网站上的所有锚点都有一个带有date的标题,并有一个漂亮的date作为它们的内部文本。 此外,我还会在页面加载后每隔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; }
这里是一个糖与时刻的例子:对于显示周的日历,我需要最后一个星期值:
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
我更喜欢糖,几个月后,现在切换到sugar.js。 它更清晰,并与JavaScript的Date类很好地集成。
OP案例由两个libs覆盖,对于sugar.js请参阅http://sugarjs.com/dates
听起来像你可以使用http://www.datejs.com/
他们在主页上有一个例子,它完全符合你所描述的内容。
编辑:其实,我想我在我的脑海中扭转了你的问题。 无论如何,我认为你可以检查出来,因为它是一个非常棒的图书馆!
编辑x2:我要回应其他人说的http://momentjs.com/可能是现在最好的select。;
编辑x3:我在一年内没有使用过date.js。 我完全用我所有的date相关的需求。
这js脚本是非常好的。 你所要做的就是执行它。 所有<time>
标签将被更改为相对date并每隔几分钟更新一次,因此相对时间将始终保持最新。