【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); }