下载地址：
一个jQuery的日期美化插件-prettydate.js
Pretty Date
一个jQuery的日期美化插件。
他可以把日期美化成 “刚刚”，“5秒前”，“3分钟前”，“一小时前”，“n周前”，“5个月前”，“3年后”，“昨天”,“前天”, “明天”,“后天”等形式。
让时间显示更生动。
安装：
引用js文件
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><!-- jQuery is required --> <script src="js/prettydate.js"></script>
基础
用法：
1.在html标签中加入 prettydate 属性
1.1基础
HTML:
<span prettydate>Jan 01 2014</span>
Demo:
11 months ago
1.2使用 data-* 属性添加设置
HTML:
<span prettydate data-date-format="YYYY.M.D h:m:s">2020.1.1 20:20:11</span>
Demo:
5 years later
2.使用 $.fn.prettydate方法初始化
2.1基础
HTML:
<span class="prettydate">Nov 11 2011 11:11:11</span>
Javascript:
$(".prettydate").prettydate();
Demo:
3 years ago
2.2 添加设置
HTML:
<p id="prettydate-add-options"></p>
Javascript:
$("#prettydate-add-options").prettydate({
date: (new Date()).getTime() + (24 * 60 * 60 * 1000) // Tomorrow
});
Demo:
Tomorrow
——————–
3.参数配置
局部配置参数使用： $(“#target”).prettydate(options);
全局配置参数使用： $.fn.prettydate.setDefaults(options);
数据属性方式配置： data-* 例如：data-date-format=”YYYY.M.D h:m:s”
参数：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| afterSuffix | string | “later” | |
| beforeSuffix | string | “ago” | |
| autoUpdate | boolean | false | 自动更新，当时间更新后，自动更新。 |
| date | object / number / string | null | 日期数据 ，允许日期对象，日期数量（毫秒），有效日期字符串或自定义日期字符串的日期格式。 |
| dateFormat | string | “YYYY-MM-DD hh:mm:ss” | 日期格式。 |
| duration | number | 60000 | 自动更新时间周期 （以毫毛为单位） |
| messages | object | (as follows) | 美化格式配置（详细讲下边） |
4.方法
美化，或者 再次更换日期视图。
用法：$(“#target”).prettydate(“prettify”);
销毁，从元件破坏prettydate实例
用法：$(“#target”).prettydate(“destroy”);
—————————————
全局配置中文例子：
// zh-CN
$.fn.prettydate.setDefaults({
afterSuffix: "后",
beforeSuffix: "前",
dateFormat: "YYYY-MM-DD hh:mm:ss",
messages: {
second: "刚刚",
seconds: "%s秒%s",
minute: "一分钟%s",
minutes: "%s分钟%s",
hour: "一小时%s",
hours: "%s小时%s",
day: "一天%s",
days: "%s天%s",
week: "一周%s",
weeks: "%s周%s",
month: "一个月%s",
months: "%s个月%s",
year: "一年%s",
years: "%s年%s",
yesterday: "昨天",
beforeYesterday: "前天",
tomorrow: "明天",
afterTomorrow: "后天"
}
});
自动更新例子：
HTML:
span id="prettydate-auto-update"></span>
JavaScript:
$("#prettydate-auto-update").prettydate({
autoUpdate: true,
date: new Date(),
duration: 1000
});
Demo:
One minute ago