vue项目中日期插件Moment.js的使用总结

Moment.js官方文档地址

1. 安装依赖包

   npm install moment --save
   

2. 在main.js引入moment的样式文件

   import moment from 'moment' // 日期插件
   Vue.prototype.$moment = moment
   

3. moment中常用日期获取(以当前时间为例: 2021-06-28 11:52:53)

   // 日期格式化
   年-月-日 时:分:秒: moment(date).format('YYYY-MM-DD HH:mm:ss') // "2021-06-28 11:52:53"
   年-月-日 时:分: moment(date).format('YYYY-MM-DD HH:mm')// "2021-06-28 11:52"
   年-月-日: moment(date).format('YYYY-MM-DD') // "2021-06-28"
   年-月: moment(date).format('YYYY-MM') // "2021-06"
   月-日: moment(date).format('MM-DD') // "06-28"
   时:分:秒: moment(date).format('HH:mm:ss') // "11:52:53"
   时:分: moment(date).format('HH:mm') // "11:52"
   
   // 获取昨天日期
   昨天日期：moment().add(-1, 'days').format('YYYY-MM-DD') // "2021-06-27"
   
   // 获取当前周的周数和当前周的开始日期和结束日期
   当前周的周数: moment(moment().subtract(1, 'days')).weeks() // 27
   当前周的开始日期: moment().week(weekCount).startOf('week').add(1, 'days').format('YYYY-MM-DD') // "2021-06-28"
   当前周的结束日期: moment().week(weekCount).endOf('week').add(1, 'days').format('YYYY-MM-DD') // "2021-07-04"
   
   // 获取当前月的开始日期和结束日期
   当前月的开始日期: moment().startOf("month").format('YYYY-MM-DD') // "2021-06-01"
   当前月的结束日期: moment().endOf("month").format('YYYY-MM-DD') // "2021-06-30"
   
   // 获取当前年的开始日期和结束日期
   当前年的开始日期: moment().startOf("year").format('YYYY-MM-DD') // "2021-01-01"
   当前年的结束日期: moment().endOf('year').format('YYYY-MM-DD') // "2021-12-31"
   
   // 获取过去7天的日期
   let lastSevenDays = []
   for (let i = 1; i <= 7; i++) {
       lastSevenDays.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
   }
   console.log(lastSevenDays)
   // 运行结果： ["2021-06-27", "2021-06-26", "2021-06-25", "2021-06-24", "2021-06-23", "2021-06-22", "2021-06-21"]
   
   // 获取过去30天的日期
   let lastThirtyDays = []
   for (let i = 1; i <= 30; i++) {
       lastThirtyDays.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
   }
   console.log(lastThirtyDays)
   // 运行结果：["2021-06-27", "2021-06-26", "2021-06-25", "2021-06-24", "2021-06-23", "2021-06-22", "2021-06-21", "2021-06-20", "2021-06-19", "2021-06-18", "2021-06-17", "2021-06-16", "2021-06-15", "2021-06-14", "2021-06-13", "2021-06-12", "2021-06-11", "2021-06-10", "2021-06-09", "2021-06-08", "2021-06-07", "2021-06-06", "2021-06-05", "2021-06-04", "2021-06-03", "2021-06-02", "2021-06-01", "2021-05-31", "2021-05-30", "2021-05-29"]
   

4. 在组件中使用

   this.$moment().format("YYYY-MM-DD") // "2021-06-28"
   this.$moment('2021-01-18T04:22:36.000+0000').format("YYYY-MM-DD") // "2021-01-18"
   this.$moment(1624853040951).format("YYYY-MM-DD") // ""2021-06-28"
   this.$moment('Mon Jun 28 2021 12:02:47 GMT+0800').format("YYYY-MM-DD") // "2021-06-28"