微信小程序wxml日期时间格式化显示

本篇文章讲解一下微信小程序中wxml日期时间格式化的方法

因微信小程序wxml中是不能直接用js的一些特性方法的，有时候我们又需要在渲染时处理一下日期格式。今天我们讲一下如何在wxml中对日期进行格式化

我们需要通过wxs实现

第一步  创建wxs文件（名字随意，目录随意）

//日期格式化-------------------------------------------------------------
var formatTime = function (strDate, format = "yyyy-MM-dd hh:mm:ss") {
    if(strDate==null || strDate ==undefined || strDate=="")
    {
        return ""
    }
    // 解决ios出现NaN问题
    strDate = strDate.replace("T", " ");
    var realDate = strDate ? getDate(strDate.replace(getRegExp('-', 'g'), '/')) : getDate();
    var regYear = getRegExp("(y+)", "i");
    var date = [
        ["M+", realDate.getMonth() + 1],
        ["d+", realDate.getDate()],
        ["h+", realDate.getHours()],
        ["m+", realDate.getMinutes()],
        ["s+", realDate.getSeconds()],
        ["q+", Math.floor((realDate.getMonth() + 3) / 3)],
        ["S+", realDate.getMilliseconds()],
    ];
    var reg1 = regYear.exec(format);
    if (reg1) {
        format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length));
    }
    for (var i = 0; i < date.length; i++) {
        var reg2 = getRegExp("(" + date[i][0] + ")").exec(format);
        if (reg2) {
            format = format.replace(reg2[1], reg2[1].length == 1 ? v : ("00" + date[i][1]).substring(("" + date[i][1]).length));
        }
    }
    return format;
}

module.exports = {
    formatTime:formatTime
}

第二步，在wxml的最顶部引用  （路径根据自己的情况修改）

<wxs module="com" src="../utils/common.wxs"></wxs>

第三步，使用formatTime方法

<view class="text-gray text-df">{{com.formatTime(customerDetail.create_time,"yyyy年MM月dd日")}}</view>

相关文章

微信小程序js文件中date日期格式化