Extjs TimeField组件实现正常时间格式显示的代码示例与详解

在实际开发中，Extjs的TimeField组件经常会遇到时间格式显示异常的问题——后台明明返回了标准的JSON日期格式，但前端却呈现为奇怪的内容。传统做法是修改后台代码，将日期时间格式转换为字符串再返回。然而，操作后端的流程往往并不便捷，尤其是在团队分工明确或接口已经稳定的场景下。

不妨换一种思路：直接在前端解决问题。我们可以重写TimeField的setValue方法，拦截传入的值，执行自定义的格式转换。具体实现如下：

复制代码 代码如下:

Ext.override(Ext.form.TimeField, {
    getValue: function () {
        return this.value;
    },
    setValue: function (v) {
        this.value = v;
        this.setRawValue(this.formatValue(v));
        return this;
    },
    formatValue: function (v) {
        if (v.length > 8) { // timefield最大不超过8个字符，大于8个的肯定是JSON格式
            var jsondate = eval("new " + v.substr(1, v.length - 2)).toLocaleTimeString();
            // toLocaleTimeString返回格式不太统一，小时小于10时只有1位，需要补零
            jsondate = jsondate.length == 8 ? jsondate.substr(0, 5) : '0' + jsondate.substr(0, 4);
            return jsondate;
        }
        return v;
    }
});

这段代码的核心逻辑是：在setValue时，先保留原始值，再调用自定义的formatValue方法进行格式化。关键判断条件——如果传入字符串长度超过8（因为常规时间格式最多8位，如"12:34:56"），那一定是JSON日期格式（例如"/Date(1234567890)/"），此时利用eval将日期字符串解析为Date对象，再通过toLocaleTimeString转换为本地时间字符串。最后处理小时可能缺失前导零的问题，截取前5位得到"HH:mm"格式。

这样做的好处是，后台完全无需改动，前端自动兼容各类时间格式，简洁高效。当然，eval存在一定的安全风险，如果对安全性有较高要求，可以采用更安全的方式解析JSON日期。但对于内部项目，这通常是一个足够轻量的解决方案。