如何修复Kendo Grid日期时间格式随本地时间变化与数据库值不符问题
问题原因
出现展示时间偏差的根本原因是Kendo默认会将后端返回的DateTime值识别为UTC时间,自动转换为浏览器所在时区(GMT+02:00)的时间进行展示:数据库存储的是GMT+06:30时区的10:25,转换为UTC时间为03:55,再转换为GMT+02:00时区正好是05:55,和你遇到的展示结果一致。
修复方案
- 方案1:后端直接返回格式化后的日期字符串
这是最稳妥不会出现时区转换问题的方案。后端从数据库取出时间后,直接格式化为dd.MM.yyyy HH:mm:ss格式的字符串返回给前端,前端模板直接输出即可,修改后的代码如下:
.ClientTemplate("#= DateTranStr #")
其中DateTranStr为后端返回的格式化后的字符串字段。
- 方案2:前端手动修正时区偏移
如果不方便修改后端返回结构,可以在前端模板中手动将时间偏移补回数据库所在的GMT+06:30时区,修改后的代码如下:
.ClientTemplate("#= (function(){ var d = new Date(DateTran); var serverOffset = 6.5 * 60; var localOffset = d.getTimezoneOffset(); d.setMinutes(d.getMinutes() + serverOffset + localOffset); return kendo.toString(d, 'dd.MM.yyyy HH:mm:ss'); })() #")
- 方案3:全局配置Kendo时区(适用于Kendo UI R3 2019及以上版本)
如果整个系统所有时间都需要展示GMT+06:30时区的时间,可以在页面初始化时全局配置Kendo的默认时区,后续所有时间格式化都会自动使用该时区,无需单独修改每个模板:
kendo.timezone = "Asia/Yangon"; // 对应GMT+06:30时区
配置完成后你原来的模板代码无需修改即可正常展示数据库原始时间。
专用格式化说明
Kendo本身没有专门用于展示原始数据库时间的格式化方法,核心处理逻辑都是避免自动时区转换或者手动修正时区偏移,以上三种方案都可以满足需求,优先推荐方案1,没有多余的前端计算逻辑,也不会出现时区适配问题。
内容的提问来源于stack exchange,提问作者saulyasar
相关产品推荐
相关产品推荐

