struts中jsp提交的数据，struts会自动转换为action中的属性类型；
对于基本的数据类型以及日期类型会自动转换；
就像前面那一篇博客的代码封装一样，会把字符串类型传过来的数据转化为相应的数据；
现在又有一种情况，日期的类型有很多种形式，我们上次输入的是这种形式：2016-12-13，会正常的显示，并且传给后台，但是日期的格式很多种，而一旦我们改成这样20161213，就会出现问题了，如下：（页面还是会相应的跳转的）
那么，现在问题来了，就需要自定义类型格式的转换；
对于基本数据类型以及yyyy-MM-dd日期类型的日期格式会自动转换；
而其他的格式的转换，需要自定义类型转换器，有两种类型：局部类型转换器和全局类型转换器。
Struts转换器API
—TypeConverter 转换器接口
—DefaultTypeConverter 默认类型的转换器类（实现复杂，一般不去用）
—StrutsTypeConverter 用户编写的转换器接口，继承此类即可
转换器开发步骤
局部转换器
1、写转换器类（一般在工具包写去写）
package com.type;
import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import org.apache.struts2.util.StrutsTypeConverter;
/**
* 自定义类型转换器
* @author Administrator
*要求：格式支持yyyy-MM-dd/yyyyMMdd/yyyy年MM月dd日
*/
public class MyConverter extends StrutsTypeConverter {
//先定义格式
DateFormat df[]={
new SimpleDateFormat("yyyy-MM-dd"),
new SimpleDateFormat("yyyyMMdd"),
new SimpleDateFormat("yyyy年MM月dd")
};
/**
* 把struts转换为指定的类型 [现在 的目标是把string转化为Date]
* @param arg0 当前的上下文环境
* @param arg1 jsp表单提交的字符串的值
* @param arg2 要转换的目标类型
*/
@Override
public Object convertFromString(Map arg0, String[] arg1, Class arg2) {
// TODO Auto-generated method stub
SimpleDateFormat sdf=new SimpleDateFormat("yyMMdd");
System.out.println("hhh");
//判断
if (arg1 == null || arg1.length==0) {
return null;
}
//判断类型必须为Date
if (Date.class !=arg2) {
return null;
}
//迭代，转换失败，就继续下一个格式的转换，转换成功直接返回
for (int i = 0; i < df.length; i++) {
try {
return df[i].parse(arg1[0]);
} catch (ParseException e) {
continue;
}
}
return null;
}
@Override
public String convertToString(Map arg0, Object arg1) {
// TODO Auto-generated method stub
return null;
}
}
2、配置转换器类（告诉struts应用自己的转换器，必须在类的同一个包下写）
在同包的action目录下，新建一个properties文件，
命名规则是：ActionClassName-conversion.properties;
user.birth=com.type.MyConverter
项目截图
总结：这个局部的转换器不能给不其它action使用
这个时候要用全局的转换器
需要写一个转换器，给所有的action用！
配置全局类型转换器
-->src/xwork-conversion.properties
-->内容
java.util.Data=转换器类（com.type.MyConverter）
java.util.Date=com.type.MyConverter
项目截图
js小练习：选项卡2.0版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>选项卡</title>
<style type="text/css" media="screen">
#div1 {
width: 200px;
position: relative;
}
#div1 span:first-of-type {
position: absolute;
left: 0;
top: 100px;
display: none;
}
#div1 span:last-of-type {
position: absolute;
right: 0;
top: 100px;
display: none;
}
#div1 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
#div1 input.active {
background: red;
}
#div2 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
#div2 input.active {
background: red;
}
</style>
</head>
<script type="text/javascript">
window.onload = function() {
tab('div1');
function tab(id) {
var oParent=document.getElementById(id);
var aInput = oParent.getElementsByTagName('input');;
var aDiv=oParent.getElementsByTagName('div');
var aSpan=oParent.getElementsByTagName('span');
var iNow=0;
//按钮点击
for (var i = aInput.length - 1; i >= 0; i--) {
aInput[i].index=i;
aInput[i].onclick=function () {
change(this.index);
iNow=this.index;
}
}
//鼠标靠近选择按钮出现及消失
oParent.onmouseover=function () {
for (var i = aSpan.length - 1; i >= 0; i--) {
aSpan[i].style.display='block';
}
}
oParent.onmouseout=function () {
for (var i = aSpan.length - 1; i >= 0; i--) {
aSpan[i].style.display='none';
}
}
//为span添加点击事件
aSpan[1].onclick=function () {
if (iNow==aDiv.length-1) {
iNow=0;
}else{
iNow++;
}
change(iNow);
}
aSpan[0].onclick=function () {
if (iNow==1) {
iNow=aDiv.length-1;
}else{
iNow--;
}
change(iNow);
}
//因为事件的发生而刺激切换的函数
function change(iNow){
for (var i = aInput.length - 1; i >= 0; i--) {
aInput[i].className='';
aDiv[i].style.display='none';
}
aInput[iNow].className='active';
aDiv[iNow].style.display = 'block';
}
}
}
</script>
<body>
<div id="div1">
<input type="button" class="active" name="" value="1">
<input type="button" name="" value="2">
<input type="button" name="" value="3">
<div style="display: block;">11111111111</div>
<div>22222222222222 </div>
<div>33333333333333 </div>
<span><—</span>
<span>—></span>
</div>
</body>
</html>
效果如图：
