自定義一個時間過濾器

soasme 發布于2019-08-20 14:00 / 1407人閱讀

摘要：我用的創建了一個自定義的過濾器，可以把后臺傳過來的統一格式的時間過濾成上述的三種格式的時間，具體代碼如下今天昨天前天前端新人一個，第一次在這里發表自己的文章，也有半年都沒有寫過學習筆記文章了。

最近公司在開發一款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自定義一個偽數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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