项目中日期类型的处理
1. H5新增的日期输入框
//我们普通的日期类型。yyyy-MM-dd
<input type="date" value="2015-09-24"/>
//时间类型
<input type="time" value="13:59"/>
<input type="time" value="13:59:59"/>
//我们最常用的,精确的时间
<input type="datetime-local" value="2015-09-24T13:59:59"/>
//月份
<input type="month" value="2015-09"/>
//周
<input type="week" value="2015-W02"/>
1.1 前端 ==》后端 传值
我们发现每次获得datetime-local的值,传到后台,总是会接收不到,我们只能把datetime-local的值进行一个处理,转换成我们标准的 ”yyyy-MM-dd mm:hh:ss“的格式,转换代码如下:
function datetimeFormat(stringTypeDate){
var datetimeType = "";
var date = new Date(stringTypeDate);
datetimeType = date.getFullYear()+"-"+getMonth(date)+"-"+getDay(date)+" "+
getHours(date)+":"+getMinutes(date)+":"+getSeconds(date);//yyyy-MM-dd 00:00:00格式日期
return datetimeType;
}
//返回 01-12 的月份值
function getMonth(date){
var month = "";
month = date.getMonth() + 1; //getMonth()得到的月份是0-11
if(month<10){
month = "0" + month;
}
return month;
}
//返回01-30的日期
function getDay(date){
var day = "";
day = date.getDate();
if(day<10){
day = "0" + day;
}
return day;
}
//返回小时
function getHours(date){
var hours = "";
hours = date.getHours();
if(hours<10){
hours = "0" + hours;
}
return hours;
}
//返回分
function getMinutes(date){
var minute = "";
minute = date.getMinutes();
if(minute<10){
minute = "0" + minute;
}
return minute;
}
//返回秒
function getSeconds(date){
var second = "";
second = date.getSeconds();
if(second<10){
second = "0" + second;
}
return second;
}
转换成字符串之后,可以通过后台的String类型接收,但是我们想在后台直接映射成Date对象,我们就需要在实体类上面加上一些注解(就可以自动映射成对应的Date对象了):
@DateTimeFormat(pattern = "yyyy-MM-dd yyyy-MM-dd hh:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd hh:mm:ss", timezone = "GMT+8")
private Date endTime;
1.2 后端 ==》 前端 传值
异步的方式获得数据,我们可以使用JsonFormat注解实现,但是我们如果使用Thymeleaf 模板引擎就会失效了,前端显示的是日期的标准格式。这时候就是用到了Thymeleaf的工具类了;
具体代码如下:
<span th:text="${#dates.format(emp.getStartTime(),'yyyy-MM-dd hh:mm:ss')}"/>
#dates.format ( 日期对象, 格式化字符串);
另外附上我们关闭当前页面的代码:
setTimeout(function() {
window.opener = null;
window.open('','_self');
window.close();
}, 2000);