vue实现全局(局部)日期过滤器(任意格式)

1.全局日期过滤器

<script>
	Vue.filter('formaDate', function (value, fmt) {
            var date = new Date(value);
            var o = {
                "M+": date.getMonth() + 1, //月份
                "d+": date.getDate(), //日
                "h+": date.getHours(), //小时
                "m+": date.getMinutes(), //分
                "s+": date.getSeconds(), //秒
                "w+": date.getDay(), //星期
                "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o) {
                if (k === 'w+') {
                    if (o[k] === 0) {
                        fmt = fmt.replace('w', '周日');
                    } else if (o[k] === 1) {
                        fmt = fmt.replace('w', '周一');
                    } else if (o[k] === 2) {
                        fmt = fmt.replace('w', '周二');
                    } else if (o[k] === 3) {
                        fmt = fmt.replace('w', '周三');
                    } else if (o[k] === 4) {
                        fmt = fmt.replace('w', '周四');
                    } else if (o[k] === 5) {
                        fmt = fmt.replace('w', '周五');
                    } else if (o[k] === 6) {
                        fmt = fmt.replace('w', '周六');
                    }
                } else 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;
        })
</script>

由于测试,所以我在data中定义的nowTime: new Date()
使用如下(常用几种格式):
在这里插入图片描述

<p>{{nowTime | formaDate('yyyy-MM-dd')}}</p>
<p>{{nowTime | formaDate('yyyy-MM-dd hh:mm:ss')}}</p>
<p>{{nowTime | formaDate('yyyy-MM-dd hh:mm:ss w')}}</p>
<p>{{nowTime | formaDate('yyyy/MM/dd')}}</p>
<p>{{nowTime | formaDate('yyyy/MM/dd hh:mm:ss')}}</p>
<p>{{nowTime | formaDate('yyyy/MM/dd hh:mm:ss w')}}</p>
<p>{{nowTime | formaDate('yyyy年MM月dd日')}}</p>
<p>{{nowTime | formaDate('yyyy年MM月dd日 hh:mm:ss')}}</p>
<p>{{nowTime | formaDate('yyyy年MM月dd日 hh:mm:ss w')}}</p>

2.局部日期过滤器
使用方法和全局使用方法一样(同上)

<script>
	export default{
		  data(){
		   return{
                nowTime: new Date()
            },
            // 局部过滤器
            filters: {
                formaDate2(value, fmt) {
                    var date = new Date(value);
                    var o = {
                        "M+": date.getMonth() + 1, //月份
                        "d+": date.getDate(), //日
                        "h+": date.getHours(), //小时
                        "m+": date.getMinutes(), //分
                        "s+": date.getSeconds(), //秒
                        "w+": date.getDay(), //星期
                        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o) {
                        if (k === 'w+') {
                            if (o[k] === 0) {
                                fmt = fmt.replace('w', '周日');
                            } else if (o[k] === 1) {
                                fmt = fmt.replace('w', '周一');
                            } else if (o[k] === 2) {
                                fmt = fmt.replace('w', '周二');
                            } else if (o[k] === 3) {
                                fmt = fmt.replace('w', '周三');
                            } else if (o[k] === 4) {
                                fmt = fmt.replace('w', '周四');
                            } else if (o[k] === 5) {
                                fmt = fmt.replace('w', '周五');
                            } else if (o[k] === 6) {
                                fmt = fmt.replace('w', '周六');
                            }
                        } else 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;
                }
            }
       }
	}
}
</script>
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃葡萄不吐葡萄皮嘻嘻

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值