Vue全局日期时间过滤器实现代码分享


本文分享了在Vue中实现全局日期、时间、日期时间格式化的过滤器代码,并给出了使用示例,方便开发者们在项目中快速应用。

最近正好在练习写小项目,用到了日期时间过滤器,在Vue中直接将过滤器写在全局(全局过滤器)任何组件都可以使用还是非常的方便,我总共写了三个过滤器,将代码分享给大家,如果还有其他的方案或者建议,可以在评论区进行探讨.

一、全局日期过滤器

显示格式 2023/06/07

Vue.filter("formater", (d) => {
    let d1 = new Date(d);
    return (
        d1.getFullYear() + "/" + (d1.getMilliseconds() + 1) + "/" + d1.getDate()
    );
});

二 、全局时间过滤器

显示格式 13:14:52

Vue.filter("formtime", (d) => {
    let d1 = new Date(d);
    return d1.getHours() + ":" + d1.getMinutes() + ":" + d1.getSeconds();
});

三、全局日期时间过滤器

显示格式 2023-06-07 13:14:52

Vue.filter("datetime", (d) => {
    let d1 = new Date(d);
    let year = d1.getFullYear();
    let month = ("0" + (d1.getMonth() + 1)).slice(-2);
    let day = ("0" + d1.getDate()).slice(-2);
    let hour = ("0" + d1.getHours()).slice(-2);
    let minute = ("0" + d1.getMinutes()).slice(-2);
    let second = ("0" + d1.getSeconds()).slice(-2);

    return (
        year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
    );
});


扫描二维码,在手机上阅读

Element UI头像上传组件自定义格式上传

JavaScript实现九九乘法表展示

评 论