vue_cli自定义时间--moment插件和手写封装

自定义时间–moment插件

安装命令

npm install --save moment  // 安装命令

在main.js中

import moment from 'moment'
Vue.use(moment)
Vue.prototype.moment = moment

在组件中

<template>
  <div class="parent">
    <div>moument自定义时间：{{moment(new Date()).format('YYYY-MM-DD')}}</div>
  </div>
</template>
<script>
export default {
  name: 'Parent',
  mounted () {
    const a = this.moment([2021, 4, 28]).month(3).format('YYYY-MM-DD') // 2021-04-28
    const b = this.moment([2021, 4, 28]).format('YYYY-MM-DD') // 2021-05-28
    const c = this.moment(new Date()).format('YYYY-MM-DD') // 2021-04-28
    console.log(a)
    console.log(b)
    console.log(c)
  }
}
</script>

结果

自定义时间–JavaScript封装

新建一个js文件，并引入到index.html中

// 日期格式化
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "H+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

在组件中

<template>
    <div class="test">
        <van-button @click="getDate">click</van-button>
    </div>
</template>

<script>
    export default {
        name: "Test",
        methods: {
            getDate () {
                let nowFormat1 = new Date().Format("yyyy-M-d");
                let nowFormat2 = new Date().Format("yyyy-MM-dd");
                let nowFormatAll = new Date().Format("yyyy年MM月dd日 HH时mm分ss秒S毫秒, 第qq季度");
                console.log(nowFormat1);
                console.log(nowFormat2);
                console.log(nowFormatAll);
            }
        }
    }
</script>

结果