vue项目中使用moment.js

vue项目中使用moment.js

moment.js: JavaScript日期处理类库

1、安装

npm install moment --save
// 或 yarn add moment

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

2、使用
一、第一种：
（1）在untils文件夹下面新建一个tool.js文件，封装一些常用的函数

//--------------------------封装一些常用的函数-----------------------
import moment from 'moment';

// 短时间
export const shortTime = function (value) {
    return moment(value).format('YYYY-MM-DD');
}

// 长时间
export const time = function (value) {
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
}

//过滤秒
export const leaveTime = function (value) {
    return moment(value).format('YYYY-MM-DD HH:mm');
}

// 年月
export const monthTime = function (value) {
    return moment(value).format('YYYY-MM');
}

// 时分秒
export const secondsTime = function (value) {
    return moment(value).format('HH:mm:ss');
}

// 中国标准时间的转化
export const filterTime = (time, type = 'short') => {
    if (type == 'short') {
        return moment(time).format('YYYY-MM-DD')
    } else {
        return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
}

export const startOfDate = function(d, dateType = 'day'){
    return moment(d).startOf(dateType)
}

export const endOfDate = function(d, dateType = 'day'){
    return moment(d).endOf(dateType)
}

// 当月第一天和最后一天   传入一个日期，返回数组['2019-12-01','2019-12-31']
export const lastDateofMonth = function (d) {
    let firstDate = moment(d).startOf('month').format('YYYY-MM-DD');
    let endDate = moment(d).endOf('month').format('YYYY-MM-DD');
    let Datearr = [];
    Datearr.push(firstDate);
    Datearr.push(endDate);
    return Datearr;
}

（2） 使用（在js中使用即中）

<script>
import {shortTime,time,startOfDate,endOfDate } from '@/utils/tool';
export default {
  data() {
    return {
      form: {
        startTime: shortTime(new Date()),
        //时间格式为 startTime: "2020-05-15"
        endTime: shortTime(new Date()),
         //时间格式为 endTime: "2020-05-15"
        ...
      },
   },
    methods: {
    // 通话详情
    getDetailList(){
      let params = {
  		...
        startTime: time(startOfDate(this.filterData.startTime)),
        // 时间格式为 startTime: "2020-05-15 00:00:00"
        endTime: time(endOfDate(this.filterData.endTime))
        //时间格式为 endTime: "2020-05-15 23:59:59"
      }

      getCalledDetails({data:params}).then(res => {
        if (res.code === 0) {
        	...
        } else {
          this.$message.error(res.message);
        }
      })
    }, 
  }
}

二、第二种
如果没有封装，直接在js中使用，则：

<script>
import moment from 'moment';
import { time } from "@/utils/tool";
export default {
  created() {
    console.log(time(moment().startOf('day')))
    //打印出来结果:  2020-05-15 00:00:00
    console.log(moment(moment().startOf('day')).format('YYYY-MM-DD HH:mm:ss'))
    //打印出来结果： 2020-05-15 00:00:00
  },
 }