EasyUI——DateBox和DateTimeBox的汉化和显示格式修改

    最近做项目用到了EasyUI-DateBox控件，上网查询的查查询的时候发现还有DateTimeBox控件，其实使用的时候是一样的，只不过一个多了时间而已。

    是用这个控件的时候遇到了两个问题，一个是汉化的问题，一个是格式显示问题。

    两个控件的显示：

DateBox的默认日期格式是：



DateTimeBox的默认日期格式是：



 

汉化：

  解决方法：直接引入easyui-lang-zh_CN.js就可以了

 

  下载地址为：http://www.softhy.net/soft/33695.htm

 

格式显示问题：

 

以DateTimeBox为例进行转换，DateBox是一样的，只截取需要的代码就可以。

 

 

正则表达式实现方法：

<inputclass="easyui-datetimebox"data-options="formatter:ww4,parser:w4"style="width:200px;">yyyy年mm月dd日hh点</input>
<scripttype="text/javascript">
function ww4(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
return y+'年'+(m<10?('0'+m):m)+'月'+(d<10?('0'+d):d)+'日'+(h<10?('0'+h):h)+'点';

}
function w4(s){
varreg=/[\u4e00-\u9fa5]/  //利用正则表达式分隔
var ss = (s.split(reg));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
var h = parseInt(ss[3],10);
if (!isNaN(y) &&!isNaN(m)&& !isNaN(d) && !isNaN(h)){
returnnewDate(y,m-1,d,h);
} else {
return new Date();
}
}
</script>

substring函数

<inputclass="easyui-datetimebox"data-options="formatter:ww3,parser:w3"style="width:200px;">yyyy/mm/dd hh-mm-ss</input>
<scripttype="text/javascript">
function ww3(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var str=y+'/'+(m<10?('0'+m):m)+'/'+(d<10?('0'+d):d)+'/'+''+(h<10?('0'+h):h)+':'+(min<10?('0'+min):min)+':'+(sec<10?('0'+sec):sec);
return str;
}
function w3(s){
if (!s) return new Date();
var y = s.substring(0,4);
var m =s.substring(5,7);
var d = s.substring(8,10);
var h = s.substring(11,14);
var min = s.substring(15,17);
var sec = s.substring(18,20);
if (!isNaN(y) &&!isNaN(m)&& !isNaN(d) && !isNaN(h) && !isNaN(min)&&!isNaN(sec)){
returnnewDate(y,m-1,d,h,min,sec);
} else {
return new Date();
}
}
</script>

js获取控件的值：

 varBeginTime =$("#id").datebox('getValue');

 

小结：

     一个新的东西的使用其实也很简单，利用网络以及自己的经验没有什么解决不了的~这篇博客就作为分享了~