解决easyui日期时间框ie的兼容的问题


Posted in Javascript onMarch 01, 2018

前几天项目进入最后准备上线阶段,测试突然发现使用easyui的datetimebox插件获取的时间在ie的时候无法获取到比当前时间还往后的时间,当时是这么写的:

$(selector).datetimebox(
	{
formatter : function(date) {
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	var d = date.getDate();
	var h = date.getHours(); //获取当前小时数(0-23)
	var mi = date.getMinutes(); //获取当前分钟数(0-59)
	var s = date.getSeconds(); 
	var result = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
+ " " + (h < 10 ? '0' + h : h)
+ ":" + (mi < 10 ? '0' + mi : mi);
	
	//console.log(result+"--第127行");
	if(second==false){

	} else {
result += ":" + (s < 10 ? '0' + s : s);
	}
	return result;
},
  parser : function(s) {
	var t = Date.parse(s);
	if (!isNaN(t)) {
return new Date(t);
	} else {
return new Date();
	}
}
	});

测试谷歌浏览器等主流浏览器都没有问题,可以把一开始回显的时间显示出来,并可以选择时间,但是到ie的时候,却发现选择不了时间了,而且回显的日期也不对,老是当前的时间。调试了好久,才发现是ie浏览器不支持js的parse()方法。parse()方法是把日期解析转换成该日期的毫秒数。

formatter是格式化日期的格式。而parser是把解析你格式化的日期,具体写法看我截的API图吧:

解决easyui日期时间框ie的兼容的问题

因为parse在ie中无法使用~导致在ie下无法解析显示出格式化过后日期的时间。下面是我自己改过的代码:

$(selector).datetimebox( 
  { 
  formatter : function(date) { 
   var y = date.getFullYear(); 
 var m = date.getMonth()+1; 
 var d = date.getDate(); 
 var h = date.getHours(); 
 var min = date.getMinutes(); 
 return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+' '+(h<10?('0'+h):h)+':'+min; 
  }, 
  parser : function(s) { 
 var ss = (s.split(" ")); 
 var ymd = ss[0].split("-"); 
 var hms = ss[1].split(":"); 
 //console.log(ymd+" "+hms); 
 var y = parseInt(ymd[0],10); 
 var m = parseInt(ymd[1],10); 
 var d = parseInt(ymd[2],10); 
 var h = parseInt(hms[0],10); 
 var min = parseInt(hms[1],10); 
 if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min)){ 
 return new Date(y,m-1,d,h,min); 
 } else { 
 return new Date(); 
 } 
  } 
  });

formatter格式化的日期是xxxx-xx-xx xx:x。所以在下面parser解析时先通过日期和时间之间的空格,把他俩分割开来。ss[0]==xxxx-xx-xx,ss[1]==xx:xx。这样的话再通过-和:的分割,把他们分割成一个个数字,这样的话直接写入new Date()的参数里就可以返回正确的日期格式了~~好了,经测试完美兼容ie这个坑爹的浏览器。

今天在使用时突然发现这个方法的一个bug,那就是如何一开始datetime时间框没有数据是,会报split错误,所以今天修改了下,加了个为空判断:

if(s==""){ 
 return new Date(); 
 }else{ 
 //alert(s); 
 var ss = (s.split(" ")); 
 var ymd = ss[0].split("-"); 
 var hms = ss[1].split(":"); 
 //console.log(ymd+" "+hms); 
 var y = parseInt(ymd[0],10); 
 var m = parseInt(ymd[1],10); 
 var d = parseInt(ymd[2],10); 
 var h = parseInt(hms[0],10); 
 var min = parseInt(hms[1],10); 
 if (!isNaN(y) && !isNaN(m) && !isNaN(d) && !isNaN(h) && !isNaN(min)){ 
  return new Date(y,m-1,d,h,min); 
 } else { 
  return new Date(); 
 } 
 }

在这要注意s是个字符串类型~所以不能用s==null来做判断条件~

以上这篇解决easyui日期时间框ie的兼容的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
详解Immutable及 React 中实践
Mar 01 #Javascript
解决VUEX兼容IE上的报错问题
Mar 01 #Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 #Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 #Javascript
Node.js readline模块与util模块的使用
Mar 01 #Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 #Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 #Javascript
You might like
使用PHP实现Mysql读写分离
2013/06/28 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
php图像验证码生成代码
2017/06/08 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python内存读写操作示例
2018/07/18 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
护理专业推荐信
2013/11/07 职场文书
植树节标语
2014/06/27 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers
详解MySQL的内连接和外连接
2023/05/08 MySQL