vue使用Moment插件格式化时间

﹏ヽ暗。殇╰゛Y 2021-09-18 23:44 617阅读 0赞

### 使用npm命令安装moment ###

npm install moment --save

### 在main.js文件里引用moment ###

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import Moment from 'moment'
    
    // 定义全局时间戳过滤器
    Vue.filter('formatDate', function(value) { 
      return Moment(value).format('YYYY-MM-DD HH:mm:ss')
    })
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>'
    })

### 在组件里使用 ###

<div class="time">{ { item.rateTime | formatDate}}</div>

### 常用的一些日期格式化方法 ###

1.  日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a'); // 四月 16日 2019, 12:24:48 中午
    moment().format('dddd');                    // 星期二
    moment().format("MMM Do YY");               // 4月 16日 19
    moment().format('YYYY [escaped] YYYY');     // 2019 escaped 2019
    moment().format();                          // 2019-04-16T12:24:48+08:00

1.  相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 7 年前
    moment("20120620", "YYYYMMDD").fromNow(); // 7 年前
    moment().startOf('day').fromNow();        // 12 小时前
    moment().endOf('day').fromNow();          // 12 小时内
    moment().startOf('hour').fromNow();       // 28 分钟前

1.  日历时间

moment().subtract(10, 'days').calendar(); // 2019年4月6日
    moment().subtract(6, 'days').calendar();  // 上周三中午12点28
    moment().subtract(3, 'days').calendar();  // 上周六中午12点28
    moment().subtract(1, 'days').calendar();  // 昨天中午12点28分
    moment().calendar();                      // 今天中午12点28分
    moment().add(1, 'days').calendar();       // 明天中午12点28分
    moment().add(3, 'days').calendar();       // 本周五中午12点28
    moment().add(10, 'days').calendar();      // 2019年4月26日

1.  多语言支持

moment().format('L');    // 2019-04-16
    moment().format('l');    // 2019-04-16
    moment().format('LL');   // 2019年4月16日
    moment().format('ll');   // 2019年4月16日
    moment().format('LLL');  // 2019年4月16日中午12点28分
    moment().format('lll');  // 2019年4月16日中午12点28分
    moment().format('LLLL'); // 2019年4月16日星期二中午12点28分
    moment().format('llll'); // 2019年4月16日星期二中午12点28分

### 说明文档 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">格式代码</th> 
   <th align="left">说明</th> 
   <th align="left">返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">YYYY</td> 
   <td align="left">四位数字完整表示的年份</td> 
   <td align="left">如：1999 或 2019</td> 
  </tr> 
  <tr> 
   <td align="left">M</td> 
   <td align="left">数字表示的月份，没有前导零</td> 
   <td align="left">1 ~ 12</td> 
  </tr> 
  <tr> 
   <td align="left">MM</td> 
   <td align="left">数字表示的月份，没有前导零</td> 
   <td align="left">01 ~ 12</td> 
  </tr> 
  <tr> 
   <td align="left">MMM</td> 
   <td align="left">三个字母缩写表示的月份</td> 
   <td align="left">一月 ~ 十二月</td> 
  </tr> 
  <tr> 
   <td align="left">MMMM</td> 
   <td align="left">数字表示的月份，没有前导零</td> 
   <td align="left">一月 ~ 十二月</td> 
  </tr> 
  <tr> 
   <td align="left">M</td> 
   <td align="left">月份，完整的文本格式</td> 
   <td align="left">1 ~ 12</td> 
  </tr> 
  <tr> 
   <td align="left">D</td> 
   <td align="left">月份中的第几天，没有前导零</td> 
   <td align="left">1 ~ 31</td> 
  </tr> 
  <tr> 
   <td align="left">DD</td> 
   <td align="left">月份中的第几天，有前导零</td> 
   <td align="left">01 ~ 31</td> 
  </tr> 
  <tr> 
   <td align="left">d</td> 
   <td align="left">星期中的第几天，数字表示</td> 
   <td align="left">0 ~ 6，0 表示周日，6 表示周六</td> 
  </tr> 
  <tr> 
   <td align="left">ddd</td> 
   <td align="left">三个字母表示星期中的第几天</td> 
   <td align="left">星期日 ~ 星期六</td> 
  </tr> 
  <tr> 
   <td align="left">dddd</td> 
   <td align="left">星期几，完整的星期文本</td> 
   <td align="left">星期日 ~ 星期六</td> 
  </tr> 
  <tr> 
   <td align="left">HH</td> 
   <td align="left">小时，24小时制，有前导零</td> 
   <td align="left">00 ~ 23</td> 
  </tr> 
  <tr> 
   <td align="left">H</td> 
   <td align="left">小时，24小时制，无前导零</td> 
   <td align="left">0 ~ 23</td> 
  </tr> 
  <tr> 
   <td align="left">hh</td> 
   <td align="left">小时，12小时制，有前导零</td> 
   <td align="left">00 ~ 12</td> 
  </tr> 
  <tr> 
   <td align="left">h</td> 
   <td align="left">小时，12小时制，无前导零</td> 
   <td align="left">0 ~ 12</td> 
  </tr> 
  <tr> 
   <td align="left">mm</td> 
   <td align="left">分钟，有前导零</td> 
   <td align="left">00 ~ 59</td> 
  </tr> 
  <tr> 
   <td align="left">m</td> 
   <td align="left">分钟，没有前导零</td> 
   <td align="left">0 ~ 59</td> 
  </tr> 
  <tr> 
   <td align="left">ss</td> 
   <td align="left">秒，有前导零</td> 
   <td align="left">01 ~ 59</td> 
  </tr> 
  <tr> 
   <td align="left">s</td> 
   <td align="left">秒，无前导零</td> 
   <td align="left">1 ~ 59</td> 
  </tr> 
 </tbody> 
</table>