jQuery Prettydate 友好日期插件 - jQuery 基础教程

jQuery Prettydate 是一款美化日期的插件，主要功能就是将日期格式化为 “just now”, “5 minutes ago”, “yesterday”, “2 weeks ago”

效果图示

官网地址

引入 JavaScript 脚本

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="/static/lib/jquery/prettydate/jquery.prettydate.js"></script>

HTML 代码

使用 Prettydate 插件，需要在 title 中带有 ISO8601 日期

<p class="date" title="2017-01-28T20:24:17Z">January 28th, 2017</p> 
<p class="date" title="2016-01-27T22:24:17Z">January 27th, 2016</p> 
<p class="date" title="2015-01-26T22:24:17Z">January 26th, 2015</p>

JavaScript 代码

$(function() { $("p.date").prettyDate(); });

运行范例 »

本地化

如需本地化该插件，可以引入 i18n 目录下响应的脚本，

在这里，我们以中文的简体中文为例

这个中文插件有一个小 BUG ... 如果你的显示不正确，可以使用我修改的版本

<script src="/static/lib/jquery/prettydate/i18n/jquery.prettydate-zh-CN.js"></script>

运行范例 »

该插件每隔 10 秒中更新一次每个被选中的元素。这样子 "just now" 会变为 "1 minute ago" 再变为 "x minutes ago" 再变为 "1 hour ago" 等等。

您可以通过指定 interval 选项为 "false" 来禁用间隔更新：

$(function() { $("a").prettyDate({ interval: false }); });

或者设置一个不同的时间间隔，例如：interval: 1000，每隔一秒更新一次每个被选中的元素

$(function() { $("a").prettyDate({ interval: 1000 }); });

value 选项默认读取 title 属性中的 ISO8601 日期字符串

重载该选项来使用其他属性，例如，一个自定义的 "isodate" 属性

$(function() { 
    $("a").prettyDate({
        function() { // "this" 是 DOM 元素
            return $(this).attr("isodate");
        } 
    }); 
});