唯品秀博客
首页 > 前端开发 > Javascript > 超好用的时间格式化插件Moment.js

超好用的时间格式化插件Moment.js

2019年02月23日 唯品秀 1549次浏览

在实际开发项目时候,我们经常会遇到后端给我们的是时间戳格式,而需要前端去依照产品需求来如何展示时间样式,每次都挺烦恼,有的甚至让后端转好再给前端用,但实际来说,时间戳格式化应该是前端要做的事,因为时间最根本的数据格式就是时间戳。每次这时候你是否又是把之前的项目代码封装好的方法在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
3
4
5
6
7
8
9
10
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('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
moment("20111031", "YYYYMMDD").fromNow(); // 7 年前
moment("20120620", "YYYYMMDD").fromNow(); // 7 年前
moment().startOf('day').fromNow();        // 12 小时前
moment().endOf('day').fromNow();          // 12 小时内
moment().startOf('hour').fromNow();       // 38 分钟前

小结

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

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 10 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
10

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

共有 1 条评论 - 超好用的时间格式化插件Moment.js

  1. 一帘幽梦 Mac OS X Chrome 73.0.3683.103

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

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

站点统计

  • 文章总数: 191 篇
  • 草稿数目: 2 篇
  • 分类数目: 13 个
  • 页面总数: 21 个
  • 评论总数: 831 条
  • 链接总数: 13 个
  • 标签总数: 372 个
  • 建站时间: 887 天
  • 注册用户: 718 人
  • 访问总量: 8657523 次
  • 最近更新: 2019年5月20日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线