唯品秀前端博客

在实际开发项目时候,我们经常会遇到后端给我们的是时间戳格式,而需要前端去依照产品需求来如何展示时间样式,每次都挺烦恼,有的甚至让后端转好再给前端用,但实际来说,时间戳格式化应该是前端要做的事,因为时间最根本的数据格式就是时间戳。每次这时候你是否又是把之前的项目代码封装好的方法在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) 打赏

上一篇:

下一篇:

相关推荐

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

表情

最新评论

  1. 一帘幽梦
    Mac OS X Chrome 73.0.3683.103

    确实好用,什么项目都可以使用,屌屌的,多谢分享

  2. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏