日期格式化是我们常用的功能,Vue2.0已经移除了大部分过滤器包括日期格式化 ,转而用插件或者计算属性形式替代,但是有时候这两种方法使用虽然增加了自由性,但是对于我这种懒惰的程序员来说并不方便,那就用一段原生js来返回格式化的日期吧。Tips设计思想非常简单,替换给定格式化的字符串为日期。

注意函数中使用了ES6字符串padStart 方法。

 /**
 * 格式化日期
 * @param {string} fmt 
 * @param {new Date} date
 * @return string
 */ 
function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加,必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}
例
//dateFormat('H/m/d H:M:S',new Date())   // 2020/3/25 7:13:45

在Vue中使用

<template>
    <div id="app">
         <small>{{datetime | dateFormat('Y-m-d H:M:S')}}</small> 
    </div>
</template>
<script>
    export default {
        name: 'app',
        ...
        methods:{},
        filters: {
            dateFormat(date,fmt){
                 如上...
            }
        }
    }
</script>