date-time
/
time.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>dateFormate</title>
</head>

<body>
    <div id="app">
        <div style="font-size: 40px; color:red;">{{msg}}</div>
        <div>-----------------------------</div>
        <div>正常new Date 出来的时间格式：{{normalDate}}</div>
        <div>格式化之后的格式：{{normalDate | formateDate("yyyy-MM-dd")}}</div>
        <div>利用封装好的函数快速实现格式化时间：{{normalDate | formatDate1("yyyy-MM-dd hh:mm:ss")}}</div>
        <div id="">
            新的导入的格式化函数运行结果{{vvv}}
        </div>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        //利用vue的过滤器实现时间的过滤；
        Vue.filter('formateDate', function(value, arg) {
            if (arg === "yyyy-MM-dd") {
                var ret = value.getFullYear() + "-" + (value.getMonth() + 1) + "-" + value.getDate()
            }
            return ret
        })

        Vue.filter("formatDate1", function(value, arg) {

            //封装好的函数，可格式化出任意格式的数据，模板中随意更改参数样式，都会得出相对于的时间格式
            function dateFormat(date, format) {
                if (typeof date === "string") {
                    let mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                        date = parseInt(mts[2]);
                    }
                }
                date = new Date(date);
                if (!date || date.toUTCString() == "Invalid Date") {
                    return ""
                }
                let map = {
                    "M": date.getMonth() + 1, //月份
                    "d": date.getDate(),
                    "h": date.getHours(),
                    "m": date.getMinutes(),
                    "s": date.getSeconds(),
                    "q": Math.floor((date.getMonth() + 3) / 3),
                    "S": date.getMilliseconds()
                }
                format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    let v = map[t]
                    if (v != undefined) {
                        if (all.length > 1) {
                            v = "0" + v;
                            v = v.substr(v.length - 2)
                        }
                        return v
                    } else if (t == 'y') {
                        return (date.getFullYear() + "").substr(4 - all.length)
                    }
                    return all
                })
                return format
            };
            //直接调用，将我们自己定义的参数，传进来return 出去即可；
            return dateFormat(value, arg)
        })

        var vm = new Vue({
            el: "#app",
            data: {
                msg: "格式化时间demo",
                normalDate: new Date(),
                vvv: "",
                dymacTime: ""
            },
            methods: {
                dymacFunction() {
                    this.dymacTime = this.dateFormat(this.normalDate, "yyyy-MM-dd hh:mm:ss")
                },
                dateFormat(tmp, fmt) {
                    let date = null;
                    if (!tmp) {
                        return "";
                    }
                    if (tmp instanceof Date) {
                        date = tmp;
                    } else if (typeof tmp == "string" || typeof tmp == "number") {
                        date = new Date(tmp);
                    } else {
                        return "";
                    }
                    if (date == "Invalid Date") {
                        let aaa = tmp.replace(/-/g, "/");
                        date = new Date(aaa);
                    }
                    if (!fmt) {
                        fmt = "yyyy-MM-dd";
                    }
                    if (/(y+)/.test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                    }
                    let o = {
                        "M+": date.getMonth() + 1, //月份
                        "d+": date.getDate(), //日
                        "h+": date.getHours(), //小时
                        "m+": date.getMinutes(), //分
                        "s+": date.getSeconds(), //秒
                        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    for (let 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;
                    // 'yyyy-MM-dd hh:mm:ss'
                    //'yyyy年MM月dd日'
                }
            },
            created() {
                let aaa = this.dateFormat(this.normalDate, "yyyy-MM-dd hh:mm:ss")
                this.vvv = aaa
            }
        })
    </script>
</body>

</html>