您的位置:首页 > 编程学习 > > 正文

vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)

更多 时间:2022-04-01 21:11:50 类别:编程学习 浏览量:611

vue实现一个炫酷的日历组件

vue利用Moment插件格式化时间的实例代码

moment是一款多语言支持的日期处理类库, 在vue中如何使用呢?首先附上官网地址:http://momentjs.cn/, 毕竟查找api才是学习正途!

使用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/>'
    })
    
    
    
  • 在组件里使用

  • <li class="time">{{item.rateTime | formatDate}}</li>
    
    
  • 常用的一些日期格式化方法

    日期格式化

  • 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
    
    
  • 相对时间

  • 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 分钟前
    
    
  • 日历时间

  • 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日
    
    
  • 多语言支持

  • 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分
    
    
  • 说明文档

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

    总结

    到此这篇关于vue利用Moment插件格式化时间的文章就介绍到这了,更多相关vue用Moment格式化时间内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    标签:vue moment 格式化
    您可能感兴趣