关于datetimepicker 使用遇到的问题总结

一、datetimepicker与实体的关系

关系说明

datetimepicker 返回的是一个String类型的值，在实体中的定义类型可以是Date或TimeStamp，对应数据库中字段类型是datetime

问题说明

在进行保存的时候，发生400 bad request错误，一般原因就是“ 提交的字段类型和后台接收字段类型不匹配造成的”；

处理办法

第一步：

在实体中使用注解@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")；

@DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
private Timestamp beginTime;	

第二步：

在jsp页面中对于datetimepicker中的显示格式进行转换，此处我使用了jstl标签库的格式化标签，即如下面代码所示的<fmt:formatdate>标签；

<label for="begintime" class="control-label">开始时间:</label>
<input type="text" class="datatimepicker-input" id="begintime" name="begintime" 
value="<fmt:formatDate value="${begintime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>"								 	onclick="initDateTimePicker(this)" onkeydown="return false;">


//js：
function initDateTimePicker(datetime){
    $(datetime).datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        language: 'zh-CN',
	autoclose: true,
	startView : 2
    });
    $(datetime).datetimepicker('show');
}

第三步：

在datetimepicker的初始化中，定义了datetimepicker的format，注意它的格式与实体的格式不同；

datetimepicker的format="yyyy-mm-dd hh:ii:ss"

实体的pattern="yyyy-MM-dd HH:mm:ss"

二、datetimepicker 实现开始时间小于结束时间

1. 首先是开始时间和结束时间的Html

<div id="begintimeDiv">
    <label for="begintime" class="control-label">开始时间:</label>
    <input type="text" class="datatimepicker-input" id="begintime" name="begintime" 
value="<fmt:formatDate value="" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>"							 	onclick="initDateTimePicker(this)" onkeydown="return false;">
</div>
<div id="endtimeDiv">
    <label for="endtime" class="control-label">开始时间:</label>
    <input type="text" class="datatimepicker-input" id="endtimeDiv" name="endtimeDiv" 
value="<fmt:formatDate value="" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>"							 	onclick="initDateTimePicker(this)" onkeydown="return false;">
</div>

2. 然后js的实现

        $("#begintime").datetimepicker({
		format: 'yyyy-mm-dd hh:ii:ss',
		language: 'zh-CN',
		autoclose: true,
		startView : 2
	}).on('changeDate', function(event) {
		event.preventDefault();
		event.stopPropagation();
		var begintime=$("#begintime").val();
		$("#endtime").datetimepicker('setStartDate',begintime);
		$("#endtime").val("");
	});
	$("#endtime").datetimepicker({
		format: 'yyyy-mm-dd hh:ii:ss',
		language: 'zh-CN',
		autoclose: true,
		startView : 2,
	}).on('changeDate', function(event) {
		event.preventDefault();
		event.stopPropagation();
		var endtime=$("#endtime").val();
		$("#begintime").datetimepicker('setEndDate',endtime);
	});

3. 之前出现过的问题

$("#begintime").datetimepicker('setEndDate',event.date);

使用到了event.date来获取选中的时间，这样依赖就会出现开始时间与结束时间相差8个小时的问题。