【easy ui】Datebox插件显示日期错误
背景描述
- 页面上有两个日期字段,初始化为easy ui的datebox类型
- 从后台返回两个字段,date1和date2,分别给两个日期控件赋值
- date1能正常显示,date2显示错误(有可能是显示当天的日期,有可能是1900年1月1日)
分析
- 前台初始化代码是否一致
$("#date1").datebox({
editable:false});
$("#date2").datebox({
editable:false});
//赋值方式
value="${entity.authorizeTermDate}"
- 后台返回数据类型是否一致
均为Date类型
date1:数据库返回 date2:java后台计算
结论
数据库返回的Date类型和java后台计算的Date类型,虽然在编译器中都显示为如下格式:
Wed Oct 19 17:42:44 CST 2022
但是,这两者如果通过el表达式方式
modelAndView.addObject("entity", bean);
返回给前台页面,从数据库中返回的Date类型能正常显示,因为它返回的实际上是时间戳, 但是java后台计算的,返回的并不是标准的时间戳(此处为猜想),因此前台的datebox无法识别,导致显示错误。
当我将java后台计算获得的date2,转换成String类型的数据,date2Str返回给前台后,显示就正常了。
Date date = curr.getTime(); bean.setDate2Str(DateUtil.formatDateToString(date,"yyyy-MM-dd"));
后续
后续我们发现,其实date1和date2,已经正确的返回到前台,只是dateBox无法识别,因此显示异常。可以使用前台的解析代码,将返回的date1和date2解析后,赋值即可。
$("#date1").datebox("setValue",getDate("${entity.date1}"));
/**
* 获取日期
* @params arguments 日期字符串
*/
function getDate(arguments) {
if (arguments == null || arguments == ) {
return null;
}
var t, y, m, d, h, i, s;
t = new Date(arguments);
y = t.getFullYear();
m = t.getMonth() + 1;
d = t.getDate();
// 可根据需要在这里定义时间格式
return y + - + (m < 10 ? 0 + m : m) + - + (d < 10 ? 0 + d : d);
}
