【easy ui】Datebox插件显示日期错误

背景描述

  1. 页面上有两个日期字段,初始化为easy ui的datebox类型
  2. 从后台返回两个字段,date1和date2,分别给两个日期控件赋值
  3. date1能正常显示,date2显示错误(有可能是显示当天的日期,有可能是1900年1月1日)

在这里插入图片描述

分析

  1. 前台初始化代码是否一致
	    $("#date1").datebox({editable:false});
		$("#date2").datebox({editable:false});
//赋值方式
		value="${entity.authorizeTermDate}"
  1. 后台返回数据类型是否一致
均为Date类型
  1. 后台数据来源是否一致
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);
}

你可能感兴趣的:(web开发,java)