解决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 相关文章推荐
JS阻止用户多次提交示例代码
Mar 26 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
详解JS模块导入导出
Dec 20 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 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
zend framework文件上传功能实例代码
2013/12/25 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
JS跨域问题详解
2014/11/25 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
python通过文件头判断文件类型
2015/10/30 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
详解python中的json和字典dict
2018/06/22 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python实现移位加密和解密
2019/03/22 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python统计字符的个数代码实例
2020/02/07 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
在校生党员自我评价
2013/09/25 职场文书
视光学专业毕业生推荐信
2013/10/28 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
感谢师恩主题班会
2015/08/17 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书