简单又实用的时间格式化插件Moment.js

作者：管理员 2019-02-23 11:50:40 分类：JavaScript 阅读（8988） 1

在实际开发项目时候，我们经常会遇到后端给我们的是时间戳格式，而需要前端去依照产品需求来如何展示时间样式，每次都挺烦恼，有的甚至让后端转好再给前端用，但实际来说，时间戳格式化应该是前端要做的事，因为时间最根本的数据格式就是时间戳。每次这时候你是否又是把之前的项目代码封装好的方法在copy过来呢？再这样就out了，最近发现一个很好用，支持你想要的多种展示时间样式的插件。

安装

1	npm install moment --save # npm

在vue.js项目中如何使用

在main.js入口文件中引入，挂载到vue根实例对象上，最后moment.locale('zh-cn')是设置中文语言，默认不是中文，这个插件是支持好几十个国家、地区语言的，具体可以去看官网

1
2
3

import moment from 'moment'
moment.locale('zh-cn');
Vue.prototype.moment = moment;

在组件中通过this直接找到moment方法即可，然后在视图上就能去渲染出来

1
2
3
4
5
6
7
8
9

export default {
name: 'about',
data () {
return {
aaa: '关于about页面！',
time:this.moment().format('LL')
}
}
}

日期格式化

把时分秒格式转化为数值型的毫秒值

1 2	let time=moment.duration('01:01:01').as('seconds')*1000; console.log(time) //3661000

把数值型的毫秒值转化为时分秒格式

1 2	var time= moment.utc(3661000).format('HH:mm:ss'); console.log(time) //01:01:01

1
2
3
4
5
6
7
8
9
10
11

moment(1543809357000).format('LL'); //2018年12月3日注意这是毫秒转换，参数是Number值，不能是字符串
moment.unix(1543809357).format('LL'); //2018年12月3日注意这是秒转换，参数是Number值，不能是字符串
moment().format('L'); // 2019-02-23
moment().format('l'); // 2019-02-23
moment().format('YYYY-MM-DD H:mm'); // 2019-08-12 14:08，某些时候上面-会变成/，例如2019/02/23这时候可以手动设置格式YYYY-MM-DD
moment().format('LL'); // 2019年2月23日
moment().format('ll'); // 2019年2月23日
moment().format('LLL'); // 2019年2月23日中午11点39分
moment().format('lll'); // 2019年2月23日中午11点39分
moment().format('LLLL'); // 2019年2月23日星期六中午11点39分
moment().format('llll'); // 2019年2月23日星期六中午11点39分

1
2
3
4
5

moment().format('MMMM Do YYYY, h:mm:ss a'); // 二月 23日 2019, 11:36:57 中午
moment().format('dddd'); // 星期六
moment().format("MMM Do YY"); // 2月 23日 19
moment().format('YYYY [escaped] YYYY'); // 2019 escaped 2019
moment().format(); // 2019-02-23T11:36:57+08:00

日期格式化

1
2
3
4
5

moment().format('MMMM Do YYYY, h:mm:ss a'); // 二月 23日 2019, 11:37:31 中午
moment().format('dddd'); // 星期六
moment().format("MMM Do YY"); // 2月 23日 19
moment().format('YYYY [escaped] YYYY'); // 2019 escaped 2019
moment().format(); // 2019-02-23T11:37:31+08:00

时间加减

1
2
3
4
5
6

console.log(moment().format("YYYY-MM-DD HH:mm:ss")); //当前时间
console.log(moment().subtract(10, "days").format("YYYY-MM-DD")); //当前时间的前10天时间
console.log(moment().subtract(1, "years").format("YYYY-MM-DD")); //当前时间的前1年时间
console.log(moment().subtract(3, "months").format("YYYY-MM-DD")); //当前时间的前3个月时间
console.log(moment().subtract(1, "weeks").format("YYYY-MM-DD")); //当前时间的前一个星期时间
//减法subtract 加法？直接-负数即可

相对时间

1
2
3
4
5

moment("20111031", "YYYYMMDD").fromNow(); // 7 年前
moment().startOf('day').fromNow(); // 12 小时前
moment().endOf('day').fromNow(); // 12 小时内
moment().startOf('hour').fromNow(); // 38 分钟前
moment('20191201').subtract(30, 'days').format('YYYYMMDD') // 30天前('20191101')

时间对比大小

1
2
3
4
5
6
7
8

moment('2010-10-20').isAfter('2010-10-19'); // true 检查一个 moment 是否在另一个 moment 之后。第一个参数会被解析为 moment（如果尚未解析）
moment('2010-10-20').isAfter('2010-01-01', 'year'); // false
moment('2010-10-20').isAfter('2009-12-31', 'year'); // true
isBefore() // 与isAfter相反取值

//对应的类似方法还有
isSameOrAfter() //检查一个 moment 是否在另一个 moment 之后或与之相同。第一个参数会被解析为 moment（如果尚未解析）
isSameOrBefore() //检查一个 moment 是否在另一个 moment 之前或与之相同。第一个参数会被解析为 moment（如果尚未解析）

上一自然周

获取上周一到周日时间点

1
2
3
4
5

let weekOfday = parseInt(moment().format('d')) // 计算今天是这周第几天周日为一周中的第一天
let start = moment().subtract(weekOfday + 6, 'days').format('YYYY-MM-DD') // 周一日期
let end = moment().subtract(weekOfday, 'days').format('YYYY-MM-DD') // 周日日期
$startDate.datetimepicker('date', start);
$endDate.datetimepicker('date', end);

小结

插件确实很好用，但有点遗憾的是不支持转换中国的阴历农历，哈哈，也许人家做的就是世界标准，忽略了我大中华，怎么转农历格式呢？看我另一篇文章——js时间戳完美转换成阴历农历格式

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(11) 打赏

标签：

上一篇：秒懂Vue2中过滤器基本使用，世界如此简单

下一篇：vue程序化的事件监听器，假装很牛逼的概念

简单又实用的时间格式化插件Moment.js

安装

在vue.js项目中如何使用

日期格式化

把时分秒格式转化为数值型的毫秒值

把数值型的毫秒值转化为时分秒格式

日期格式化

时间加减

相对时间

时间对比大小

上一自然周

小结

相关推荐

共 1 条评论关于"简单又实用的时间格式化插件Moment.js"

点击取消