easy uiDatebox插件显示日期错误

Posted 2022-11-09 小魏的马仔

背景描述

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"

2. 后台返回数据类型是否一致

均为Date类型

3. 后台数据来源是否一致

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