自定义一个时间过滤器

soasme 发布于2019-08-20 14:00 / 1386人阅读

摘要：我用的创建了一个自定义的过滤器，可以把后台传过来的统一格式的时间过滤成上述的三种格式的时间，具体代码如下今天昨天前天前端新人一个，第一次在这里发表自己的文章，也有半年都没有写过学习笔记文章了。

最近公司在开发一款app，前端用的是Vue,因为业务需求中需要对后台传过来的统一格式的时间（年-月-日时：分）在不同场景下分别用不同的格式表示，如：
1、今天/昨天的时间就用“今天/昨天时：分”表示；
2、一个月内的时间用“月-日时：分”表示；
3、超过一个月的就直接使用标准时间格式“年-月-日时：分”表示。
我用Vue的filter创建了一个自定义的过滤器，可以把后台传过来的统一格式的时间过滤成上述的三种格式的时间，具体代码如下：

export default function (time) {
    var date = (typeof time === "number") ? new Date(time) : new Date((time || "").replace(/-/g, "/"))
    // console.log(date)
    var diff = (((new Date()).getTime() - date.getTime()) / 1000)
    var dayDiff = Math.floor(diff / 86400)

    var isValidDate = Object.prototype.toString.call(date) === "[object Date]" && !isNaN(date.getTime())

    if (!isValidDate) {
        console.error("not a valid date")
        return time
    }

        var today = new Date(date)
        var year = today.getFullYear()
        var month = ("0" + (today.getMonth() + 1)).slice(-2)
        var day = ("0" + today.getDate()).slice(-2)
        var hour = ("0" + today.getHours()).slice(-2)
        var minute = ("0"+today.getMinutes()).slice(-2)


    if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
        return `${year}-${month}-${day} ${hour}:${minute}`
    }

        return dayDiff === 0 && (
            diff < 86400 && "今天" + `${hour}:${minute}`
            ) ||
            dayDiff < 2 && "昨天" + `${hour}:${minute}`||
            dayDiff < 3 && "前天" + `${hour}:${minute}`||
            dayDiff < 31 && `${month}-${day} ${hour}:${minute}`
}

前端新人一个，第一次在这里发表自己的文章，也有半年都没有写过学习笔记文章了。感觉表达能力比较欠缺，所以考虑后决定先写这篇主要是代码的，工具性的文章，争取以后多写一些理解性的文章。新年快乐！

云服务器 GPU云服务器自定义函数过滤自定义一个类型自定义镜像创建时间 js自定义一个伪数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81359.html

Vue_Vue权威指南

摘要：效率不高，很多多余，称之为脏检查。通过索引设置数组元素并触发视图更新。解决闪烁问题自定义指令自定义指令提供一种机制将数据的变化映射为行为。 Vue特性 Vue只是聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue通过简单 API提供高效的数据绑定和灵活的组件系统轻量数据绑定指令插件化架构从传统后台MVC 向REST API + 前端MV*迁移DOM是数据的一种自然映...

SimonMa 2019-08-21 14:31 评论0 收藏0
VUE实例图解

摘要：案例品牌列表构建基本结构利用的样式数据要双向更新，所以要用到，同时在后面的中要进行初始化为添加按钮绑定事件的中，绑定值为关键字删除标签绑定函数，传入参数的时候，需要用括号事件修饰符，表示阻止默认事件实例对象新建一个实例函数中初始化需要双向 VUE案例品牌列表构建基本结构利用bootstrap的样式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 评论0 收藏0
AngularJs

摘要：当左右服务都被解析并返回时，会以服务为参数去调用组件的构造函数。发送或广播的消息应该限定在最小的作用域。置顶一个通过，发送的消息列表并且窒息的管理以防止命名冲突在需要格式化数据时，将格式 angular 数据双向绑定的框架提供数据绑定，DOM指令。angular，定义了一套规则，开发中就必须遵守规则，这套规则为项目提供了一套解决方案。模块，组件，模板，元数据，数据绑定, 指令，服务...

sf190404 2019-08-19 18:44 评论0 收藏0
[叁]Flask web开发:模板

摘要：使用真实值替代变量，再返回最终得到的响应字符串，这一过程成为渲染。渲染模板渲染模板提供的函数把模板引擎集成到了程序中。随后的参数都是键值对，表示模板中变量对应的真实值。程序现在使用的模板继承自不是直接继承自的基模板。本系列笔记是我阅读Miguel Grinberg的《Flask Web Development》的笔记，标题与书本同步。希望通过记录技术笔记的方式促进自己对知识的理解。 ...

mochixuan 2019-07-25 10:40 评论0 收藏0